.scs-btn-icon {
	border-radius: 70px;
	padding: 12px;
	width: 44px;
	height: 44px;
	border: none;
	background: var(--scs-accent-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s ease-in-out;
}
.scs-btn-icon svg path[stroke-width] {
	stroke: var(--scs-bg-default);
	transition: stroke .25s ease-in-out;
}
.scs-btn-icon svg path[fill] {
	fill: var(--scs-bg-default);
	transition: fill .25s ease-in-out,
				stroke .25s ease-in-out;
}
.scs-btn-icon svg path[fill="white"] {
	fill: var(--scs-bg-default);
}
a:hover .scs-btn-icon,
a:active .scs-btn-icon,
button:hover .scs-btn-icon,
button:active .scs-btn-icon,
.scs-btn-icon:hover,
.scs-btn-icon:active {
	background: var(--scs-soft-accent);
}
a:hover .scs-btn-icon svg path[stroke-width],
a:active .scs-btn-icon svg path[stroke-width],
button:hover .scs-btn-icon svg path[stroke-width],
button:active .scs-btn-icon svg path[stroke-width],
.scs-btn-icon:hover svg path[stroke-width],
.scs-btn-icon:active svg path[stroke-width] {
	stroke: var(--scs-main-text);
}
a:hover .scs-btn-icon svg path[fill],
a:active .scs-btn-icon svg path[fill],
button:hover .scs-btn-icon svg path[fill],
button:active .scs-btn-icon svg path[fill],
.scs-btn-icon:hover svg path[fill],
.scs-btn-icon:active svg path[fill] {
	fill: var(--scs-main-text);
}
a:hover .scs-btn-icon svg path[fill="white"],
a:active .scs-btn-icon svg path[fill="white"],
button:hover .scs-btn-icon svg path[fill="white"],
button:active .scs-btn-icon svg path[fill="white"],
.scs-btn-icon:hover svg path[fill="white"],
.scs-btn-icon:active svg path[fill="white"] {
	fill: var(--scs-bg-default);
}

.scs-btn-icon--big {
	width: 56px;
	height: 56px;
}
.scs-btn-icon--medium {
	width: 48px;
	height: 48px;
}
.scs-btn-icon--small {
	width: 40px;
	height: 40px;
	padding: 8px;
}

.scs-btn-icon--white {
	background: var(--scs-bg-default);
}
.scs-btn-icon--white svg path[stroke-width] {
	stroke: var(--scs-main-text);
}
.scs-btn-icon--white svg path[fill] {
	fill: var(--scs-main-text);
}
.scs-btn-icon--white svg path[fill="white"] {
	fill: var(--scs-bg-default);
}
a:hover .scs-btn-icon--white,
button:hover .scs-btn-icon--white,
.scs-btn-icon--white:hover {
	background: var(--scs-accent-primary);
}
a:hover .scs-btn-icon--white svg path[stroke-width],
button:hover .scs-btn-icon--white svg path[stroke-width],
.scs-btn-icon--white:hover svg path[stroke-width] {
	stroke: var(--scs-bg-default);
}
a:hover .scs-btn-icon--white svg path[fill],
button:hover .scs-btn-icon--white svg path[fill],
.scs-btn-icon--white:hover svg path[fill] {
	fill: var(--scs-bg-default);
}
a:hover .scs-btn-icon--white svg path[fill="white"],
button:hover .scs-btn-icon--white svg path[fill="white"],
.scs-btn-icon--white:hover svg path[fill="white"] {
	fill: var(--scs-bg-default);
}
a:active .scs-btn-icon--white,
button:active .scs-btn-icon--white,
.scs-btn-icon--white:active {
	background: var(--scs-accent-primary);
}
a:active .scs-btn-icon--white svg path[stroke-width],
button:active .scs-btn-icon--white svg path[stroke-width],
.scs-btn-icon--white:active svg path[stroke-width] {
	stroke: var(--scs-bg-default);
}
a:active .scs-btn-icon--white svg path[fill],
button:active .scs-btn-icon--white svg path[fill],
.scs-btn-icon--white:active svg path[fill] {
	fill: var(--scs-bg-default);
}

.scs-btn-icon--grey {
	background: var(--scs-bg-soft);
}
.scs-btn-icon--grey svg path[stroke-width] {
	stroke: var(--scs-main-text);
}
.scs-btn-icon--grey svg path[fill] {
	fill: var(--scs-main-text);
}
.scs-btn-icon--grey svg path[fill="white"] {
	fill: var(--scs-bg-default);
}
a:hover .scs-btn-icon--grey,
button:hover .scs-btn-icon--grey,
summary:hover .scs-btn-icon--grey,
.scs-btn-icon--grey:hover {
	background: var(--scs-bg-soft);
}
a:hover .scs-btn-icon--grey svg path[stroke-width],
button:hover .scs-btn-icon--grey svg path[stroke-width],
summary:hover .scs-btn-icon--grey svg path[stroke-width],
.scs-btn-icon--grey:hover svg path[stroke-width] {
	stroke: var(--scs-accent-primary);
}
a:hover .scs-btn-icon--grey svg path[fill],
button:hover .scs-btn-icon--grey svg path[fill],
summary:hover .scs-btn-icon--grey svg path[fill],
.scs-btn-icon--grey:hover svg path[fill] {
	fill: var(--scs-accent-primary);
}
a:hover .scs-btn-icon--grey svg path[fill="white"],
button:hover .scs-btn-icon--grey svg path[fill="white"],
summary:hover .scs-btn-icon--grey svg path[fill="white"],
.scs-btn-icon--grey:hover svg path[fill="white"] {
	fill: var(--scs-bg-default);
}
a:active .scs-btn-icon--grey,
button:active .scs-btn-icon--grey,
.scs-btn-icon--grey:active {
	background: var(--scs-accent-primary);
}
a:active .scs-btn-icon--grey svg path[stroke-width],
button:active .scs-btn-icon--grey svg path[stroke-width],
.scs-btn-icon--grey:active svg path[stroke-width] {
	stroke: var(--scs-bg-default);
}
a:active .scs-btn-icon--grey svg path[fill],
button:active .scs-btn-icon--grey svg path[fill],
.scs-btn-icon--grey:active svg path[fill] {
	fill: var(--scs-bg-default);
}
a:active .scs-btn-icon--grey svg path[fill="white"],
button:active .scs-btn-icon--grey svg path[fill="white"],
.scs-btn-icon--grey:active svg path[fill="white"] {
	fill: var(--scs-accent-primary);
}

.scs-btn-icon--grey-dark {
	background: var(--scs-light-grey);
}
.scs-btn-icon--grey-dark svg path[stroke-width] {
	stroke: var(-scs-bg-default);
}
.scs-btn-icon--grey-dark svg path[fill] {
	fill: var(-scs-bg-default);
}
a:hover .scs-btn-icon--grey-dark,
a:active .scs-btn-icon--grey-dark, 
button:hover .scs-btn-icon--grey-dark,
button:active .scs-btn-icon--grey-dark, 
.scs-btn-icon--grey-dark:hover,
.scs-btn-icon--grey-dark:active {
	background: var(--scs-accent-primary);
}
a:hover .scs-btn-icon--grey-dark svg path[stroke-width],
a:active .scs-btn-icon--grey-dark svg path[stroke-width], 
button:hover .scs-btn-icon--grey-dark svg path[stroke-width],
button:active .scs-btn-icon--grey-dark svg path[stroke-width], 
.scs-btn-icon--grey-dark:hover svg path[stroke-width],
.scs-btn-icon--grey-dark:active svg path[stroke-width] {
	stroke: var(--scs-bg-default);
}
a:hover .scs-btn-icon--grey-dark svg path[fill],
a:active .scs-btn-icon--grey-dark svg path[fill], 
button:hover .scs-btn-icon--grey-dark svg path[fill],
button:active .scs-btn-icon--grey-dark svg path[fill], 
.scs-btn-icon--grey-dark:hover svg path[fill],
.scs-btn-icon--grey-dark:active svg path[fill] {
	fill: var(--scs-bg-default);
}

@media (max-width: 767px) {
	.scs-btn-icon--big {
		width: 48px;
		height: 48px;
	}
}