ws-btn {display: inline-block}
.button:not(.btns-row) ws-btn + ws-btn {margin:0 0 0 6px}
.flex_row > ws-btn + ws-btn {margin:0}
.menu__title > ws-btn + ws-btn:not(:has(button.btn-hide)), .editBlock-close-buttons > ws-btn + ws-btn {margin:0 0 0 8px;}
ws-btn.ws-btn-right {float: right}
ws-btn.ws-btn-left {float: left}
ws-btn.fake {pointer-events: none !important;}
.btns-row {display: flex;align-items: center;flex-direction: row;gap: 10px;}
.btns-row.btns-row-right {justify-content: flex-end}
.btns-row.btns-row-center {justify-content: center}
.btns-row ws-btn {margin: 0}
.btns-row ws-btn.ws-btn-right {margin-left: auto}

/** BAD CSS NEED REWORK FOR DIFF CASES **/
/*
.modal__header ws-btn ~ ws-btn {margin: 0}
.modal__content ws-btn, .modal__content ws-btn ~ button {margin: 0 0 0 6px;}
.modal__content ws-btn:first-child {margin: 0}
.btns-row ws-btn.ws-btn-right ~ ws-btn.ws-btn-right {margin: 0}
 */


.btn-double:has(> *:nth-child(2)) {
	display: inline-flex;
}
.btn-double:has(> *:nth-child(2)) .btn:focus,
.btn-double:has(> *:nth-child(2)) .btn:hover {
	z-index: 1;
}
.btn-double:has(> *:nth-child(2)) button:first-child:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.btn-double:has(> *:nth-child(2)) button:last-child:not(:first-child),
.btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:last-child) {
	border-radius: 0;
}
/*.btn-double button:not(.selected, :focus, :focus-visible):last-child,*/
/*.btn-double button:not(.selected, :focus, :focus-visible):nth-child(2)*/
/*{*/
/*    box-shadow: 1px 0 0 0 var(--btn-bg-color-3) inset;*/
/*}*/
.btn-double:has(> *:nth-child(2)) button:first-child:focus + button:last-child,
.btn-double:has(> *:nth-child(2)) button:first-child:focus + button:nth-child(2)
{
	box-shadow: none;
}
.btn-double:not(.btn-fill-double):has(> *:nth-child(2)) button:first-child:focus {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}
.btn-double:not(.btn-fill-double):has(> *:nth-child(2)) button:last-child:focus {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.btn-double .btn-32.notify_btn .btn-right-icon {
	--icon-size: 16px;
}


button.btn {width: 100%;}
.btn {
	--btn-bg-color-0: var(
		--trans);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	border-radius: 7px;
	height: 32px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 20px;
	color: var(--base-txt-alt-light);
	background: var(--btn-bg-color-0);
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	transition: box-shadow ease 80ms;
}
.btn svg {
	fill: var(--base-txt-alt-light);
}
.btn:focus-visible {
	outline: none;
}
.modal .btn.btn-bg, .menu .btn.btn-bg {
	--btn-bg-color-0: var(--base-cont-mod-top);
}
.btn.btn-bg {
	--btn-bg-color-0: var(--base-cont-top);
}
.btn.btn-disabled, .btn[disabled] {
	opacity: 0.5;
	cursor: default;
}
.btn.btn-hide {
	display: none;
}



.btn.btn-g.btn-solid {color: var(--base-txt-btn-flip)}
.btn.btn-g.btn-solid svg, .btn.btn-g.btn-solid:hover svg, .btn.btn-g.btn-solid.hover svg, .btn.btn-g.btn-solid:focus svg {fill: var(--base-txt-btn-flip)}
.btn.btn-g.btn-solid:focus {box-shadow: 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3)}
.btn.btn-g.btn-invert {color: var(--base-hlt-g-invert-major)}
.btn.btn-g.btn-invert svg {fill: var(--base-hlt-g-invert-major)}
.btn.btn-g.btn-invert:hover, .btn.btn-g.btn-invert:focus {color: var(--base-txt-btn-flip)}
.btn.btn-g.btn-invert:hover svg, .btn.btn-g.btn-invert.hover svg, .btn.btn-g.btn-invert:focus svg {fill: var(--base-txt-btn-flip)}
.btn.btn-g.btn-fill {color: var(--base-hlt-g-invert)}
.btn.btn-g.btn-fill svg {fill: var(--base-hlt-g-invert)}
.btn.btn-g.btn-outline {box-shadow: 0 0 0 1px var(--base-line-secondary) inset}
.btn.btn-g.btn-outline:hover, .btn.btn-g.btn-outline.hover {color: var(--base-hlt-g-invert-major);/* box-shadow: 0 0 0 1px var(--base-line-accent) inset; */}
.btn.btn-g.btn-outline:focus {color: var(--base-txt-max);/* box-shadow: 0 0 0 1px var(--btn-bg-color-4), 0 0 0 4px var(--btn-bg-color-2); */}
.btn.btn-g.btn-outline:hover svg, .btn.btn-g.btn-outline.hover svg {fill: var(--base-hlt-g-invert-major)}
.btn.btn-g.btn-outline:focus svg {fill: var(--btn-bg-color-4)}
.btn.btn-g.btn-plain:hover, .btn.btn-g.btn-plain.hover {color: var(--base-hlt-g-invert)}
.btn.btn-g.btn-plain:focus {color: var(--base-hlt-g-invert-major)}
.btn.btn-g.btn-plain:hover svg, .btn.btn-g.btn-plain.hover svg, .withBtnHover:hover .btn.btn-plain svg {fill: var(--base-hlt-g-invert)}
.btn.btn-g.btn-plain:focus svg {fill: var(--base-hlt-g-invert-major)}
.btn.btn-g.btn-skeleton {color: var(--btn-txt-color)}
.btn.btn-g.btn-skeleton svg {fill: var(--btn-txt-color)}
.btn.btn-g.btn-skeleton:hover, .btn.btn-g.btn-skeleton.hover {color: var(--base-hlt-g-invert-major);box-shadow: 0 0 0 1px var(--base-line-accent) inset;}
.btn.btn-g.btn-skeleton:hover svg, .btn.btn-g.btn-skeleton.hover svg {fill: var(--base-hlt-g-invert-major);}
.btn.btn-g.btn-skeleton:focus {color: var(--base-txt-max); box-shadow: 0 0 0 1px var(--base-hlt-g-focus) inset}
.btn.btn-g.btn-skeleton:focus svg {fill: var(--base-txt-max)}
.btn.btn-g.btn-skeleton.selected, .btn.btn-g.btn-skeleton.selected:hover, .btn.btn-g.btn-skeleton.selected:focus,
.btn.btn-g.btn-skeleton:focus-visible, .btn.btn-g.btn-skeleton:focus-visible:hover, .btn.btn-g.btn-skeleton:focus-visible:focus {color: var(--base-txt-accent)}
.btn.btn-g.btn-skeleton.selected svg, .btn.btn-g.btn-skeleton.selected:hover svg, .btn.btn-g.btn-skeleton.selected.hover svg, .btn.btn-g.btn-skeleton.selected:focus svg,
.btn.btn-g.btn-skeleton:focus-visible svg, .btn.btn-g.btn-skeleton:focus-visible:hover svg, .btn.btn-g.btn-skeleton:focus-visible.hover svg, .btn.btn-g.btn-skeleton:focus-visible:focus svg {fill: var(--btn-txt-color)}
.btn.btn-w.btn-skeleton svg, .btn.btn-w.btn-skeleton:hover svg, .btn.btn-w.btn-skeleton.hover svg, .btn.btn-w.btn-skeleton:focus svg {fill: var(--btn-txt-color)}
.btn.btn-g.btn-ghost:hover, .btn.btn-g.btn-ghost.hover, .btn.btn-g.btn-ghost:focus {color: var(--base-txt-accent)}
.btn.btn-g.btn-ghost:hover svg, .btn.btn-g.btn-ghost.hover svg, .btn.btn-g.btn-ghost:focus svg {fill: var(--base-txt-accent)}
.btn.btn-g.btn-ghost:focus-visible, .btn.btn-g.btn-ghost:focus-visible:hover, .btn.btn-g.btn-ghost:focus-visible:focus {color: var(--base-txt-accent)}
.btn.btn-g.btn-ghost.selected svg, .btn.btn-g.btn-ghost.selected:hover svg, .btn.btn-g.btn-ghost.selected.hover svg, .btn.btn-g.btn-ghost.selected:focus svg,
.btn.btn-g.btn-ghost:focus-visible svg, .btn.btn-g.btn-ghost:focus-visible:hover svg, .btn.btn-g.btn-ghost:focus-visible.hover svg, .btn.btn-g.btn-ghost:focus-visible:focus svg {fill: var(--base-txt-accent)}
.btn.btn-w.btn-ghost svg, .btn.btn-w.btn-ghost:hover svg, .btn.btn-w.btn-ghost.hover svg, .btn.btn-w.btn-ghost:focus svg {fill: var(--btn-txt-color)}
/*.btn-double button.btn.btn-g.btn-outline:not(.selected, :focus, :focus-visible):last-child {box-shadow: 0 0 0 1px var(--base-line-secondary) inset}*/
.btn.btn-l.btn-solid {color: var(--colors-graphite-990)}
.btn.btn-l.btn-solid svg {fill: var(--colors-graphite-990)}
.btn.btn-l.btn-solid:focus { box-shadow: 0 0 0 1px var(--btn-bg-color-4), 0 0 0 4px var(--btn-bg-color-3);}
.btn.btn-l.btn-invert:hover { color: var(--colors-graphite-990); }
.btn.btn-l.btn-invert:hover svg { fill: var(--colors-graphite-990); }
.btn.btn-l.btn-fill {color: var(--btn-bg-color-4);}
.btn.btn-l.btn-fill svg {fill: var(--btn-bg-color-4);}
.btn.btn-l.btn-fill:hover {color: var(--btn-bg-color-4);background: linear-gradient(0, var(--trans) 0%, var(--colors-alpha-light-40) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); }
.btn.btn-l.btn-fill:hover svg {color: var(--btn-bg-color-4);}
.btn.btn-l.btn-outline {color: var(--btn-bg-color-4); box-shadow: 0 0 0 1px var(--btn-bg-color-4) inset;}
.btn.btn-l.btn-outline svg {fill: var(--btn-bg-color-4);}
.btn.btn-l.btn-outline:hover, .btn.btn-l.btn-skeleton:hover {box-shadow: 0 0 0 1px var(--btn-bg-color-4) inset;background: linear-gradient(0, var(--trans) 0%, var(--colors-alpha-light-40) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);}
.btn.btn-l.btn-outline:focus { background: none; box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-3), 0 0 0 4px var(--btn-bg-color-3); }
.btn.btn-l.btn-plain, .btn.btn-l.btn-ghost { color: var(--btn-bg-color-4); }
.btn.btn-l.btn-plain svg, .btn.btn-l.btn-ghost svg { fill: var(--btn-bg-color-4); }
.btn.btn-l.btn-skeleton { color: var(--btn-bg-color-2); box-shadow: 0 0 0 1px var(--btn-bg-color-1) inset; }
.btn.btn-l.btn-skeleton svg { fill: var(--btn-bg-color-4)}
.btn.btn-l.btn-skeleton:hover { color: var(--btn-bg-color-4); }
.btn.btn-l.btn-skeleton:hover svg { fill: var(--btn-bg-color-4); }
.btn.btn-l.btn-ghost:hover { color: var(--btn-bg-color-4); background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);}
.btn.btn-l.btn-ghost:hover svg { fill: var(--btn-bg-color-4);}

/*
color: var(--btn-txt-color);
    box-shadow: 0 0 0 1px var(--btn-txt-color) inset;
 */

/* button type A */
.btn.btn-a {
	--btn-txt-color: var(--base-txt-btn-a);
	--btn-bg-color-1: var(--base-hlt-hover);
	--btn-bg-color-2: var(--base-hlt-selected);
	--btn-bg-color-3: var(--base-hlt-pressed);
	--btn-bg-color-4: var(--base-hlt-invert);
	--btn-bg-color-5: var(--base-hlt-invert-major);
}
/* button type B */
.btn.btn-b {
	--btn-txt-color: var(--base-txt-btn-b);
	--btn-bg-color-1: var(--base-hlt-b-hover);
	--btn-bg-color-2: var(--base-hlt-b-selected);
	--btn-bg-color-3: var(--base-hlt-b-pressed);
	--btn-bg-color-4: var(--base-hlt-b-invert);
	--btn-bg-color-5: var(--base-hlt-b-invert-major);
}
/* button type DARK */
.btn.btn-g {
	--btn-txt-color: var(--base-txt-secondary);
	--btn-bg-color-1: var(--base-hlt-g-hover);
	--btn-bg-color-2: var(--base-hlt-g-selected);
	--btn-bg-color-3: var(--base-hlt-g-pressed);
	--btn-bg-color-4: var(--base-hlt-g-invert);
	--btn-bg-color-5: var(--base-hlt-g-invert-major);
}
/* button type WARN */
.btn.btn-w {
	--btn-txt-color: var(--base-txt-btn-w);
	--btn-bg-color-1: var(--base-hlt-w-hover);
	--btn-bg-color-2: var(--base-hlt-w-selected);
	--btn-bg-color-3: var(--base-hlt-w-pressed);
	--btn-bg-color-4: var(--base-hlt-w-invert);
	--btn-bg-color-5: var(--base-hlt-w-invert-major);
}
/* button type LIGHT */

.btn.btn-l {
	--btn-txt-color: var(--colors-graphite-990);
	--btn-bg-color-1: var(--colors-alpha-light-20);
	--btn-bg-color-2: var(--colors-alpha-light-90);
	--btn-bg-color-3: var(--colors-alpha-light-70);
	--btn-bg-color-4: var(--colors-alpha-light-100);
	--btn-bg-color-5: var(--colors-alpha-light-90);
}

.btn.btn-solid {
	font: var(--font-ui-13-small-bold);
	background: var(--btn-bg-color-4);
}
.btn.btn-solid:hover, .btn.btn-solid.hover {
	background: var(--btn-bg-color-5);
}
.btn.btn-solid:focus {
	background: var(--btn-bg-color-4);
	box-shadow: 0 0 0 1px var(--btn-txt-color), 0 0 0 4px var(--btn-bg-color-3);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-solid.selected, .btn.btn-solid.selected:hover, .btn.btn-solid.selected:focus,
	.btn.btn-solid:focus-visible, .btn.btn-solid:focus-visible:hover, .btn.btn-solid:focus-visible:focus {
		background: var(--btn-bg-color-5);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
	}
}
.btn.btn-solid.btn-disabled, .btn.btn-solid[disabled] {
	background: var(--btn-bg-color-4);
	box-shadow: none;
}
.btn-double:has(> *:nth-child(2)) button.btn.btn-solid:not(.selected, :focus, :focus-visible, :first-child) {
	box-shadow: 1px 0 0 0 var(--btn-bg-color-5) inset;
}
.btn-double:has(> *:nth-child(2)) button.btn.btn-fill:not(.selected, :focus, :focus-visible, :first-child) {
	box-shadow: 1px 0 0 0 var(--btn-bg-color-3) inset;
}


.btn.btn-invert {
	font: var(--font-ui-13-small-semi);
	color: var(--btn-txt-color);
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
.btn.btn-invert:hover, .btn.btn-invert.hover {
	color: var(--base-txt-alt-light);
	background: var(--btn-bg-color-4);
}
.btn.btn-invert:focus {
	background: var(--btn-bg-color-5);
	color: var(--base-txt-alt-light);
}
.btn.btn-invert svg {
	fill: var(--btn-txt-color);
}
.btn.btn-invert:hover svg, .btn.btn-invert.hover svg, .btn.btn-invert:focus svg {
	fill: var(--base-txt-alt-light);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-invert.selected, .btn.btn-invert.selected:hover, .btn.btn-invert.selected:focus, .btn.btn-invert:focus-visible {
		background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-4) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		color: var(--base-txt-alt-light);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
	}
	.btn.btn-invert.selected svg, .btn.btn-invert.selected:hover svg, .btn.btn-invert.selected.hover svg, .btn.btn-invert.selected:focus svg, .btn.btn-invert:focus-visible svg {
		fill: var(--base-txt-alt-light);
	}
}
.btn.btn-invert.btn-disabled, .btn.btn-invert[disabled] {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: none;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-invert:first-child:not(.selected, :focus, :focus-visible):hover + button.btn.btn-invert:last-child,
.btn-double:has(*:nth-child(2)) button.btn.btn-invert:not(.selected, :focus, :focus-visible):last-child:hover {
	box-shadow: 1px 0 0 0 var(--btn-bg-color-4) inset
}


.btn.btn-fill {
	font: var(--font-ui-13-small-med);
	color: var(--btn-txt-color);
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
/* TODO implement .withBtnHover:hover for another buttons */
.btn.btn-fill:hover, .btn.btn-fill.hover, .withBtnHover:hover .btn.btn-fill {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-2) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
.btn.btn-fill:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
.btn.btn-fill svg {
	fill: var(--btn-txt-color);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-fill.selected, .btn.btn-fill.selected:hover, .btn.btn-fill.selected:focus, .btn.btn-fill:focus-visible {
		background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-2) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
	}
}
.btn.btn-fill.btn-disabled, .btn.btn-fill[disabled] {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: none;
}


.btn.btn-outline {
	font: var(--font-ui-13-small-med);
	color: var(--btn-txt-color);
	box-shadow: 0 0 0 1px var(--btn-txt-color) inset;
}
.btn.btn-outline:hover, .btn.btn-outline.hover {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--btn-txt-color) inset;
}
.btn.btn-outline:focus {
	/*box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3);*/
	box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-txt-color), 0 0 0 4px var(--btn-bg-color-3);
	background: var(--btn-bg-color-0);
}
.btn.btn-outline svg {
	fill: var(--btn-txt-color);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-outline.selected, .btn.btn-outline.selected:hover, .btn.btn-outline.selected:focus,
	.btn.btn-outline:focus-visible, .btn.btn-outline:focus-visible:hover, .btn.btn-outline:focus-visible:focus {
		background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
	}
}
.btn.btn-outline.btn-disabled, .btn.btn-outline[disabled], .btn.btn-outline.btn-disabled:hover, .btn.btn-outline[disabled]:hover,
.btn.btn-outline.btn-disabled:focus, .btn.btn-outline[disabled]:focus {
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
	color: var(--btn-txt-color);
}
.btn.btn-outline.btn-disabled svg, .btn.btn-outline[disabled] svg, .btn.btn-outline.btn-disabled:hover svg, .btn.btn-outline[disabled]:hover svg,
.btn.btn-outline.btn-disabled:focus svg, .btn.btn-outline[disabled]:focus svg {
	fill: var(--btn-txt-color);
}
/*.btn-double button.btn.btn-outline:not(.selected, :focus, :focus-visible):last-child {*/
/*    box-shadow: 0 0 0 1px var(--btn-txt-color) inset;*/
/*}*/
.btn-double:has(*:nth-child(2)) button.btn.btn-outline:first-child {
	transform: translateX(1px);
}
.btn.btn-bg.btn-outline:hover, .btn.btn-outline.hover {
	background: var(--btn-bg-color-0);
}
.btn.btn-bg.btn-outline:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
/*
.btn-double button.btn-outline:first-child:focus {
    box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), -1px 0 0 0 #fffffff2 inset;
    z-index: 1;
}
.btn-double button.btn-outline:last-child:focus {
    box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), 1px 0 0 0 #fffffff2 inset;
    z-index: 1;
}
.btn-double button.btn-outline:first-child:focus-visible {
    box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), -1px 0 0 0 #ffffffe0 inset;
    z-index: 1;
}
.btn-double button.btn-outline:last-child:focus-visible {
    box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), 1px 0 0 0 #ffffffe0 inset;
    z-index: 1;
}
 */


.btn.btn-plain {
	font: var(--font-ui-13-small-med);
	color: var(--btn-txt-color);
}
/* TODO implement .withBtnHover:hover for another buttons */
.btn.btn-plain:hover, .btn.btn-plain.hover, .withBtnHover:hover .btn.btn-plain {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
.btn.btn-plain:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}
.btn.btn-plain svg {
	fill: var(--btn-txt-color);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-plain.selected, .btn.btn-plain.selected:hover, .btn.btn-plain.selected:focus, .btn.btn-plain:focus-visible {
		background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
	}
}
.btn.btn-plain.btn-disabled, .btn.btn-plain[disabled] {
	background: var(--btn-bg-color-0);
	box-shadow: none;
}


.btn.btn-skeleton {
	font: var(--font-ui-13-small-reg);
	color: var(--base-txt-primary);
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}
.btn.btn-skeleton:hover, .btn.btn-skeleton.hover {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--btn-txt-color) inset;
	color: var(--btn-txt-color);
}
.btn.btn-skeleton:hover svg, .btn.btn-skeleton.hover svg {
	fill: var(--btn-txt-color);
}
.btn.btn-skeleton:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-2) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--btn-txt-color) inset;
	color: var(--btn-txt-color);
}
.btn.btn-skeleton svg {
	fill: var(--base-txt-primary);
}
.btn.btn-skeleton:focus svg {
	fill: var(--btn-txt-color);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-skeleton.selected, .btn.btn-skeleton.selected:hover, .btn.btn-skeleton.selected:focus,
	.btn.btn-skeleton:focus-visible, .btn.btn-skeleton:focus-visible:hover, .btn.btn-skeleton:focus-visible:focus {
		color: var(--btn-txt-color);
		background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
	}
	.btn.btn-skeleton.selected svg, .btn.btn-skeleton.selected:hover svg, .btn.btn-skeleton.selected.hover svg, .btn.btn-skeleton.selected:focus svg,
	.btn.btn-skeleton:focus-visible svg, .btn.btn-skeleton:focus-visible:hover svg, .btn.btn-skeleton:focus-visible.hover svg, .btn.btn-skeleton:focus-visible:focus svg {
		fill: var(--btn-txt-color);
	}
}
.btn.btn-skeleton.btn-disabled, .btn.btn-skeleton[disabled] {
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-skeleton:not(.selected, :focus, :focus-visible):last-child {
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-skeleton:not(.selected, :focus, :focus-visible):last-child:hover {
	box-shadow: 0 0 0 1px var(--base-line-accent) inset;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-skeleton:first-child {
	transform: translateX(1px);
}
.btn.btn-bg.btn-skeleton:hover, .btn.btn-skeleton.hover {
	background: var(--btn-bg-color-0);
}
.btn.btn-bg.btn-skeleton:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
}


.btn.btn-ghost {
	font: var(--font-ui-13-small-reg);
	color: var(--base-txt-primary);
}
.btn.btn-ghost:hover, .btn.btn-ghost.hover {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	color: var(--btn-txt-color);
}
.btn.btn-ghost:hover svg, .btn.btn-ghost.hover svg {
	fill: var(--btn-txt-color);
}
.btn.btn-ghost:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	color: var(--btn-txt-color);
}
.btn.btn-ghost:focus svg {
	fill: var(--btn-txt-color);
}
.btn.btn-ghost svg {
	fill: var(--base-txt-primary);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-ghost.selected, .btn.btn-ghost.selected:hover, .btn.btn-ghost.selected:focus, .btn.btn-ghost:focus-visible {
		background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		color: var(--btn-txt-color);
	}
	.btn.btn-ghost.selected svg, .btn.btn-ghost.selected:hover svg, .btn.btn-ghost.selected:focus svg, .btn.btn-ghost:focus-visible svg {
		fill: var(--btn-txt-color);
	}
}
.btn.btn-ghost.btn-disabled, .btn.btn-ghost[disabled] {
	background: var(--btn-bg-color-0);
	box-shadow: none;
}


.btn.btn-promo {
	color: var(--base-btn-notice-major);
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-btn-notice-major) inset;
}
.btn.btn-promo svg {
	fill: var(--base-btn-notice-major);
}
.btn.btn-promo:hover svg {
	fill: var(--base-txt-alt-light);
}
.btn.btn-promo:hover, .btn.btn-promo.hover {
	background: linear-gradient(0, var(--trans) 0%, var(--base-btn-notice-minor) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--base-btn-notice-minor) inset;
	color: var(--base-txt-alt-light);
}
.btn.btn-promo:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--base-btn-notice-major) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--base-btn-notice-major) inset;
	color: var(--base-txt-alt-light);
}
.btn.btn-promo:hover svg, .btn.btn-promo.hover svg, .btn.btn-promo:focus svg {
	fill: var(--base-txt-alt-light) !important;
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-promo.selected, .btn.btn-promo.selected:hover, .btn.btn-promo.selected:focus, .btn.btn-promo:focus-visible {
		background: linear-gradient(0, var(--trans) 0%, var(--colors-amber-50) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--base-btn-notice-minor);
		color: var(--base-btn-notice-major);
	}
	.btn.btn-promo.selected:hover svg, .btn.btn-promo.selected.hover svg, .btn.btn-promo:focus-visible svg, .btn.btn-promo:focus-visible:hover svg, .btn.btn-promo:focus-visible:hover svg {
		fill: var(--base-btn-notice-major) !important;
	}
}
.btn.btn-promo.btn-disabled, .btn.btn-promo[disabled] {
	background: var(--btn-bg-color-0);
	color: var(--base-btn-notice-major);
}
.btn.btn-promo.btn-disabled svg, .btn.btn-promo[disabled] svg {
	fill: var(--base-btn-notice-major);
}


.btn.btn-time {
	font: var(--font-ui-13-small-med);
	color: var(--base-txt-primary);
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-txt-ghost) inset;
}
.btn.btn-time svg {
	fill: var(--base-txt-max);
}
.btn.btn-time:hover, .btn.btn-time.hover {
	background: linear-gradient(0, var(--trans) 0%, var(--costs-time-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--costs-time-text) inset;
}
.btn.btn-time:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--costs-time-easy) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--costs-time-text) inset;
}
.btn.btn-time ws-icon.btn-left-icon svg {
	width: 16px;
	height: 16px;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-time:not(.selected, :focus, :focus-visible):last-child {
	box-shadow: 0 0 0 1px var(--base-txt-ghost) inset;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-time:not(.selected, :focus, :focus-visible):last-child:hover {
	box-shadow: 0 0 0 1px var(--costs-time-text) inset;
}
.btn.btn-time.selected, .btn.btn-time.selected:hover, .btn.btn-time.selected:focus, .btn.btn-time:focus-visible {
	background: linear-gradient(0, var(--trans) 0%, var(--costs-time-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--costs-time-text);
}
.btn.btn-time.btn-disabled, .btn.btn-time[disabled] {
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-txt-ghost) inset;
}


.btn.btn-money {
	font: var(--font-ui-13-small-med);
	color: var(--base-txt-primary);
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-txt-ghost) inset;
}
.btn.btn-money svg {
	fill: var(--base-txt-max);
}
.btn.btn-money:hover, .btn.btn-money.hover {
	background: linear-gradient(0, var(--trans) 0%, var(--costs-money-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--costs-money-text) inset;
}
.btn.btn-money:focus {
	background: linear-gradient(0, var(--trans) 0%, var(--costs-money-easy) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 1px var(--costs-money-text) inset;
}
.btn.btn-money ws-icon.btn-left-icon svg {
	width: 16px;
	height: 16px;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-money:not(.selected, :focus, :focus-visible):last-child {
	box-shadow: 0 0 0 1px var(--base-txt-ghost) inset;
}
.btn-double:has(*:nth-child(2)) button.btn.btn-money:not(.selected, :focus, :focus-visible):last-child:hover {
	box-shadow: 0 0 0 1px var(--costs-money-text) inset;
}
.btn.btn-money.selected, .btn.btn-money.selected:hover, .btn.btn-money.selected:focus, .btn.btn-money:focus-visible {
	background: linear-gradient(0, var(--trans) 0%, var(--costs-money-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);
	box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--costs-money-text);
}
.btn.btn-money.btn-disabled, .btn.btn-money[disabled] {
	background: var(--btn-bg-color-0);
	box-shadow: 0 0 0 1px var(--base-txt-ghost) inset;
}


.btn.btn-timer, .btn.btn-sum {
	font: var(--font-ui-13-small-bold);
	color: var(--base-txt-alt-light);
	background: var(--costs-timer-play);
	box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset;
}
.btn.btn-timer:hover, .btn.btn-sum:hover, .btn.btn-sum:focus, .btn.btn-sum:focus-visible {
	box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--colors-graphite-trans-300);
}
.btn.btn-timer:focus {
	box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset;
}
.btn.btn-timer.btn-timer-play {
	background: var(--costs-timer-play);
}
.btn.btn-timer.btn-timer-warning {
	background: var(--costs-timer-warning);
}
.btn.btn-timer.btn-timer-alert {
	background: var(--costs-timer-alert);
}
.btn.btn-timer.btn-timer-pause {
	background: var(--costs-timer-pause);
}
@media screen and (min-width: 481px) { /* to disable box shadow on mobile */
	.btn.btn-timer.selected, .btn.btn-timer.selected:hover, .btn.btn-timer.selected:focus, .btn.btn-timer:focus-visible,
	.btn.btn-sum.selected, .btn.btn-sum.selected:hover, .btn.btn-sum.selected:focus, .btn.btn-sum:focus-visible {
		box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--colors-graphite-trans-300);
	}
}
.btn.btn-sum {
	background: var(--costs-timer-pause);
}
.btn.btn-timer.btn-disabled, .btn.btn-timer[disabled] {
	background: var(--costs-timer-play);
	box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset;
}
.btn.btn-sum.btn-disabled, .btn.btn-sum[disabled] {
	background: var(--costs-timer-pause);
	box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset;
}


.btn.btn-editor {
	padding: 0 4px;
	height: 28px;
	border-radius: 6px;
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-primary);
}
.btn.btn-editor:hover, .btn.btn-editor.hover {
	background: var(--base-hlt-b-hover);
	color: var(--base-txt-btn-b);
}
.btn.btn-editor:focus {
	background: var(--base-hlt-b-pressed);
}
.btn.btn-editor.btn_act, .btn.btn-editor.btn_act:focus, .btn.btn-editor.btn_act:focus-visible {
	background: var(--base-hlt-b-pressed);
	box-shadow: var(--shadow-brd-hover-b);
}
.btn.btn-editor ws-icon {
	width: 20px;
	height: 20px;
}
.btn.btn-editor svg {
	width: 16px;
	height: 16px;
	fill: var(--base-txt-primary);
}
.btn.btn-editor:hover svg, .btn.btn-editor.hover svg,
.btn.btn-editor:focus svg, .btn.btn-editor.btn_act svg{
	fill: var(--base-txt-btn-b);
}
.btn.btn-editor > span:not([class]) {padding: 0 6px;}


.btn {padding: 0 6px;}
.btn > span:not([class]) {padding: 0 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.btn ws-icon.btn-left-icon {width: 28px; height: 28px;}
.btn ws-icon.btn-right-icon {width: 20px; height: 20px;}
.btn.btn-same-left-right-icon ws-icon.btn-right-icon {width: 28px; height: 28px;}
.btn ws-icon.btn-box-small {width: 20px; height: 20px;}
.btn ws-icon.btn-box-big {width: 28px; height: 28px;}
.btn ws-icon {--icon-size: 20px;}
.btn > span:not([class]) i {font-style:normal;font-weight:100;font-variant-numeric: tabular-nums;}

.btn.btn-16 {height: 16px;font-size: 11px;padding: 0 2px;border-radius: 5px;}
.btn.btn-16 > span:not([class]) {padding: 0 4px;}
.btn.btn-16 ws-icon.btn-left-icon {width: 16px; height: 16px;}
.btn.btn-16 ws-icon.btn-right-icon {width: 14px; height: 14px;}
.btn.btn-16 ws-icon.btn-box-small {width: 14px; height: 14px;}
.btn.btn-16 ws-icon.btn-box-big {width: 16px; height: 16px;}
.btn.btn-16 ws-icon {--icon-size: 14px;}

.btn.btn-20 {height: 20px;font-size: 11px;padding: 0 2px;border-radius: 5px;}
.btn.btn-20 > span:not([class]) {padding: 0 4px;}
.btn.btn-20 ws-icon.btn-left-icon {width: 20px; height: 20px;}
.btn.btn-20 ws-icon.btn-right-icon {width: 16px; height: 16px;}
.btn.btn-20 ws-icon.btn-box-small {width: 16px; height: 16px;}
.btn.btn-20 ws-icon.btn-box-big {width: 20px; height: 20px;}
.btn.btn-20 ws-icon {--icon-size: 16px;}

.btn.btn-24 {height: 24px;font-size: 11px;padding: 0 4px;border-radius: 5px;}
.btn.btn-24 > span:not([class]) {padding: 0 4px;}
.btn.btn-24 ws-icon.btn-left-icon {width: 24px; height: 24px;}
.btn.btn-24 ws-icon.btn-right-icon {width: 16px; height: 16px;}
.btn.btn-same-left-right-icon.btn-24 ws-icon.btn-right-icon {width: 24px; height: 24px;}
.btn.btn-24 ws-icon.btn-box-small {width: 16px; height: 16px;}
.btn.btn-24 ws-icon.btn-box-big {width: 24px; height: 24px;}
.btn.btn-24 ws-icon {--icon-size: 16px;}

.btn.btn-28 { --btn-size: 28px; height: 28px;font-size: 12px;padding: 0 4px; border-radius: 6px;}
.btn.btn-28 > span:not([class]) {padding: 0 4px}
.btn.btn-28 ws-icon.btn-left-icon {width: 28px; height: 28px;}
.btn.btn-28 ws-icon.btn-right-icon {width: 20px; height: 20px;}
.btn.btn-28 ws-icon.btn-box-small {width: 20px; height: 20px;}
.btn.btn-28 ws-icon.btn-box-big {width: 28px; height: 28px;}
.btn.btn-28 ws-icon {--icon-size: 16px;}

.btn.btn-32 { --btn-size: 32px; height: 32px; font-size: 13px; padding: 0 6px; border-radius: 7px;}
.btn.btn-32 > span:not([class]) {padding: 0 6px}
.btn.btn-32 ws-icon.btn-left-icon {width: 28px; height: 28px;}
.btn.btn-32 ws-icon.btn-right-icon {width: 20px; height: 20px;}
.btn.btn-32 ws-icon.btn-box-small {width: 20px; height: 20px;}
.btn.btn-32 ws-icon.btn-box-big {width: 28px; height: 28px;}
.btn.btn-32 ws-icon {--icon-size: 20px;}

.btn.btn-36 { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;}
.btn.btn-36 > span:not([class]) {padding: 0 8px}
.btn.btn-36 ws-icon.btn-left-icon {width: 28px; height: 28px;}
.btn.btn-36 ws-icon.btn-right-icon {width: 20px; height: 20px;}
.btn.btn-36 ws-icon.btn-box-small {width: 20px; height: 20px;}
.btn.btn-36 ws-icon.btn-box-big {width: 28px; height: 28px;}
.btn.btn-36 ws-icon {--icon-size: 20px;}

.btn.btn-40 { --btn-size: 40px; height: 40px;font-size: 14px;padding: 0 10px;border-radius: 9px;}
.btn.btn-40 > span:not([class]) {padding: 0 8px;}
.btn.btn-40 ws-icon.btn-left-icon {width: 32px; height: 32px;}
.btn.btn-40 ws-icon.btn-right-icon {width: 20px; height: 20px;}
.btn.btn-40 ws-icon.btn-box-small {width: 20px; height: 20px;}
.btn.btn-40 ws-icon.btn-box-big {width: 32px; height: 32px;}
.btn.btn-40 ws-icon {--icon-size: 20px;}

.btn.btn-48 { --btn-size: 48px; height: 48px;font-size: 14px;padding: 0 12px;border-radius: 10px;}
.btn.btn-48 > span:not([class]) {padding: 0 8px}
.btn.btn-48 ws-icon.btn-left-icon {width: 32px; height: 32px;}
.btn.btn-48 ws-icon.btn-right-icon {width: 24px; height: 24px;}
.btn.btn-48 ws-icon {--icon-size: 24px;}

.btn.btn-56 { --btn-size: 56px; height: 56px;font-size: 15px;padding: 0 16px;border-radius: 12px;}
.btn.btn-56 > span:not([class]) {padding: 0 12px}
.btn.btn-56 ws-icon.btn-left-icon {width: 32px; height: 32px;}
.btn.btn-56 ws-icon.btn-right-icon {width: 24px; height: 24px;}
.btn.btn-56 ws-icon.btn-box-small {width: 24px; height: 24px;}
.btn.btn-56 ws-icon.btn-box-big {width: 32px; height: 32px;}
.btn.btn-56 ws-icon {--icon-size: 24px;}

.btn.btn-time.btn-48 ws-icon, .btn.btn-time.btn-48 ws-icon,
.btn.btn-money.btn-48 ws-icon, .btn.btn-money.btn-48 ws-icon {--icon-size: 24px; }
.btn.btn-time.btn-56 ws-icon, .btn.btn-time.btn-56 ws-icon,
.btn.btn-money.btn-56 ws-icon, .btn.btn-money.btn-56 ws-icon {--icon-size: 24px; }
.btn.btn-24.btn-promo ws-icon.btn-left-icon, .btn.btn-28.btn-promo ws-icon.btn-left-icon,
.btn.btn-36.btn-promo ws-icon.btn-left-icon, .btn.btn-40.btn-promo ws-icon.btn-left-icon, .btn.btn-promo ws-icon.btn-left-icon {width: 20px; height: 20px;}
.btn.btn-rounded {border-radius: 50px;}

.btn.btn-g.btn-invert.btn-disabled, .btn.btn-g.btn-invert[disabled] {color: var(--base-hlt-g-invert-major)}
.btn.btn-g.btn-invert.btn-disabled:hover svg, .btn.btn-g.btn-invert.btn-disabled.hover svg, .btn.btn-g.btn-invert.btn-disabled:focus svg,
.btn.btn-g.btn-invert[disabled]:hover svg, .btn.btn-g.btn-invert[disabled].hover svg, .btn.btn-g.btn-invert[disabled]:focus svg {fill: var(--base-hlt-g-invert-major)}

/** SPECIAL CASES **/
.btn ws-icon[name=spark] svg {
	/* fill: var(--btn-bg-color-4); */
}
.editor__toolbar .btn svg {
	fill: var(--base-txt-primary);
}
button.btn.pull-right, button.btn.btn-blue {
	width: auto;
}
.btn:hover span.ico_equalizer {
	background-position: -335px -35px;
}
.btn span.loader_sm {
	width: 12px;
	height: 12px;
	padding: 0;
	margin: 6px;
}
.btn ws-icon {
	pointer-events: none;
	flex-shrink: 0;
}
ws-btn.date button:nth-child(2)  span {
	width:70px;
}

ws-btn.date.date-paginal .btn-double {
	box-shadow: 0 0 0 1px var(--base-txt-btn-b) inset;
	gap: 2px;
	padding: 2px;
	border-radius: 8px;
}
ws-btn.date.date-paginal .btn-double .btn.btn-24 { padding: 0 0; }
ws-btn.date.date-paginal .btn-double .btn.btn-24:nth-child(2) { padding: 0 2px; }
ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button.btn.btn-fill:not(.selected, :focus, :focus-visible, :first-child) {
	box-shadow: none;
}
ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:last-child:not(:first-child),
ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:first-child) {
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}
ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:last-child) {
	border-radius: inherit;
}
ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:first-child:not(:last-child) {
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
}

.btn.btn-sp-time,
.btn.btn-sp-money {
	font: var(--font-ui-12-mini-med);
	color: var(--base-txt-secondary);
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}
.btn.btn-sp-time svg, .btn.btn-sp-money svg { fill: var(--base-txt-secondary); }

.btn.btn-sp-time:hover {
	color: var(--costs-time-text);
	box-shadow: 0 0 0 1px var(--costs-time-text) inset;
	background: var(--costs-time-highlight);
}
.btn.btn-sp-time:hover svg { fill: var(--costs-time-text); }
.btn.btn-sp-time:focus {
	color: var(--base-txt-primary);
	background: var(--costs-time-easy);
	box-shadow: 0 0 0 1px var(--costs-time-major) inset;
}

.btn.btn-sp-money:hover {
	color: var(--costs-money-text);
	box-shadow: 0 0 0 1px var(--costs-money-text) inset;
	background: var(--costs-money-highlight);
}
.btn.btn-sp-money:hover svg { fill: var(--costs-money-text); }
.btn.btn-sp-money:focus {
	color: var(--base-txt-primary);
	background: var(--costs-money-easy);
	box-shadow: 0 0 0 1px var(--costs-money-major) inset;
}

.btn.btn-sp-time:focus svg, .btn.btn-sp-money:focus svg { fill: var(--base-txt-primary); }
/** quantum cases **/

.btn.btn-quantum-a-fill {
	--qnt-txt-color: var(--base-txt-btn-a);
	--qnt-bg-color: var(--base-hlt-hover);
	--qnt-shadow: inherit;
}
.btn.btn-quantum-a-solid {
	--qnt-txt-color: var(--base-txt-alt-light);
	--qnt-bg-color: var(--base-hlt-invert);
	--qnt-shadow: none;
}
.btn.btn-quantum-w-solid {
	--qnt-txt-color: var(--base-txt-alt-light);
	--qnt-bg-color: var(--base-hlt-w-invert);
	--qnt-shadow: none;
}

.btn.btn-quantum { position: relative; overflow: hidden; }
.btn.btn-quantum:before, .btn.btn-quantum:after { box-sizing: border-box;z-index: 1;content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0; }
.btn.btn-quantum > * { z-index: 2; }

.btn.btn-quantum, .btn.btn-quantum:before, .btn.btn-quantum:after, .btn.btn-quantum svg { transition: 0.2s ease-in-out; }

.btn.btn-quantum:not([disabled]):hover, .btn.btn-quantum:focus, .btn.btn-quantum.focus { box-shadow: var(--qnt-shadow) !important; }
.btn.btn-quantum:not([disabled]):hover svg, .btn.btn-quantum:focus svg, .btn.btn-quantum.focus svg { fill: var(--qnt-txt-color) !important; }

.btn.btn-quantum.btn-diagonal-close:before {
	right: calc(0 - var(--btn-size));
	border-right: var(--btn-size) solid transparent;
	border-bottom: var(--btn-size) solid var(--qnt-bg-color);
	transform: translateX(-100%);
	width: 100%;
}
.btn.btn-quantum.btn-diagonal-close:after {
	left: calc(0 - var(--btn-size));
	border-left: var(--btn-size) solid transparent;
	border-top: var(--btn-size) solid var(--qnt-bg-color);
	transform: translateX(100%);
	width: 100%;
}
.btn.btn-quantum.btn-diagonal-close:not([disabled]):hover, .btn.btn-quantum.btn-diagonal-close:focus, .btn.btn-quantum.btn-diagonal-close.focus { color: var(--qnt-txt-color); }
.btn.btn-quantum.btn-diagonal-close:not([disabled]):hover:before, .btn.btn-quantum.btn-diagonal-close:focus:before, .btn.btn-quantum.btn-diagonal-close.focus:before { transform: translateX(calc(-50% + var(--btn-size) / 2)); }
.btn.btn-quantum.btn-diagonal-close:not([disabled]):hover:after, .btn.btn-quantum.btn-diagonal-close:focus:after, .btn.btn-quantum.btn-diagonal-close.focus:after { transform: translateX(calc(50% - var(--btn-size) / 2)); }

.btn.btn-quantum.btn-swipe-from-left:before, .btn.btn-quantum.btn-swipe-from-right:before {background-color: var(--qnt-bg-color);}
.btn.btn-quantum.btn-swipe-from-left:before {transform: translateX(-101%);}
.btn.btn-quantum.btn-swipe-from-right:before {transform: translateX(101%);}
.btn.btn-quantum.btn-swipe-from-left:not([disabled]):hover, .btn.btn-quantum.btn-swipe-from-right:not([disabled]):hover,
.btn.btn-quantum.btn-swipe-from-left:focus, .btn.btn-quantum.btn-swipe-from-right:focus,
.btn.btn-quantum.btn-swipe-from-left.focus, .btn.btn-quantum.btn-swipe-from-right.focus
{ color: var(--qnt-txt-color); }
.btn.btn-quantum.btn-swipe-from-left:not([disabled]):hover:before, .btn.btn-quantum.btn-swipe-from-right:not([disabled]):hover:before,
.btn.btn-quantum.btn-swipe-from-left:focus:before, .btn.btn-quantum.btn-swipe-from-right:focus:before,
.btn.btn-quantum.btn-swipe-from-left.focus:before, .btn.btn-quantum.btn-swipe-from-right.focus:before
{ transform: translateX(0); }

.btn.btn-quantum.btn-fade-both:before {background-color: var(--qnt-bg-color); opacity: 0; }
.btn.btn-quantum.btn-fade-both:not([disabled]):hover,
.btn.btn-quantum.btn-fade-both:focus,
.btn.btn-quantum.btn-fade-both.focus { color: var(--qnt-txt-color); }
.btn.btn-quantum.btn-fade-both:not([disabled]):hover:before,
.btn.btn-quantum.btn-fade-both:focus:before,
.btn.btn-quantum.btn-fade-both.focus:before { transform: translateX(0); opacity: 1; }


.btn.btn-skeleton.btn-no-hover {
	pointer-events: auto;
	cursor: initial;
}
.btn.btn-skeleton.btn-no-hover:not([disabled]):hover,
.btn.btn-skeleton.btn-no-hover:focus,
.btn.btn-skeleton.btn-no-hover:active {
	--btn-bg-color-0: var(--base-cont-top);
	background: var(--base-cont-top);
	color: unset;
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}

body.mobile .btn.btn-solid:focus-visible,
body.mobile .btn.btn-solid:focus-within {
	box-shadow: none;
}
body.mobile .btn.btn-invert:focus-visible,
body.mobile .btn.btn-invert:focus-within {
	box-shadow: none;
}
body.mobile .btn.btn-fill:focus-visible,
body.mobile .btn.btn-fill:focus-within {
	box-shadow: none;
}
body.mobile .btn.btn-plain:focus-visible,
body.mobile .btn.btn-plain:focus-within {
	box-shadow: none;
}
body.mobile .btn.btn-ghost:focus-visible,
body.mobile .btn.btn-ghost:focus-within {
	box-shadow: none;
}
body.mobile .btn.btn-skeleton:focus-visible,
body.mobile .btn.btn-skeleton:focus-within {
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}
body.mobile .btn.btn-outline:focus-visible,
body.mobile .btn.btn-outline:focus-within {
	box-shadow: 0 0 0 1px var(--btn-txt-color) inset;
}


.btn.btn-mini {
	font: var(--font-ui-10-nano-semi);
}


.btn.btn-g.btn-outline.btn-shadow-outside {box-shadow: 0 0 0 1px var(--base-line-secondary) !important;}

.btn.btn-justify-start { justify-content: flex-start; }
.btn.btn-justify-end { justify-content: flex-end; }

.btn.focus-visible {
	box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4);
}


@media (max-width: 480px) {
	/* компактна кнопка на мобілі (без тексту) */
	.btn.btn-mobile-compact span:not([class]) {
		display: none !important;
	}

	/* ЗАГОТОВКА: якщо треба приховати іконки */
	/* .btn.btn-mobile-hide-left .btn-icon-left {
		display: none !important;
	}
	.btn.btn-mobile-hide-right .btn-icon-right {
		display: none !important;
	} */
}

.btn-ripple {
	--ripple-color: var(--btn-bg-color-3);
	position: relative;
	-webkit-tap-highlight-color: transparent;
}


.btn {
	position: relative;
}
.btn-right-indicator-a:after, .btn-right-indicator-b:after, .btn-right-indicator-g:after, .btn-right-indicator-w:after,
.btn-left-indicator-a:before, .btn-left-indicator-b:before, .btn-left-indicator-g:before, .btn-left-indicator-w:before {
	position: absolute;
	display: block;
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 5px;
}
.btn-right-indicator-a:after, .btn-right-indicator-b:after, .btn-right-indicator-g:after, .btn-right-indicator-w:after { top: 4px; right: 4px; }
.btn-left-indicator-a:before, .btn-left-indicator-b:before, .btn-left-indicator-g:before, .btn-left-indicator-w:before { top: 4px; left: 4px; }

.btn-right-indicator-a:after, .btn-left-indicator-a:before { background: var(--base-txt-btn-a); }
.btn-right-indicator-b:after, .btn-left-indicator-b:before { background: var(--base-txt-btn-b); }
.btn-right-indicator-g:after, .btn-left-indicator-g:before { background: var(--base-txt-primary); }
.btn-right-indicator-w:after, .btn-left-indicator-w:before { background: var(--base-txt-btn-w); }

.btn-36, .btn-40 {
	&.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after,
	&.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { width: 6px; height: 6px; border-radius: 6px; }
	&.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after { top: 6px; right: 6px; }
	&.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { top: 6px; left: 6px; }
}
.btn-48, .btn-56 {
	&.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after,
	&.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { width: 8px; height: 8px; border-radius: 8px; }
	&.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after { top: 8px; right: 8px; }
	&.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { top: 8px; left: 8px; }
}

.btn-left-icon-180deg .btn-left-icon svg { rotate: 180deg; }

ws-btn.activity__hot .btn .btn-left-icon svg,
ws-btn.activity__today .btn .btn-left-icon svg {
	fill: var(--base-btn-notice-minor) !important;
}
ws-btn.activity__hot .btn .btn-left-icon svg {
	fill: var(--base-btn-notice-major) !important;
}
ws-btn.activity__warm .btn .btn-left-icon svg,
ws-btn.activity__yesterday .btn .btn-left-icon svg {
	fill: var(--lbl-yesterday-major) !important;
}
ws-btn.activity__hot .btn .btn-left-icon,
ws-btn.activity__today .btn .btn-left-icon {
	background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lbl-today-major) 15%, transparent) 32%, rgba(0, 255, 0, 0) 100%);
}
ws-btn.activity__yesterday .btn .btn-left-icon {
	background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lbl-yesterday-major) 15%, transparent) 32%, rgba(0, 255, 0, 0) 100%);
}

.btn.btn-proj-folder {
	background: var(--folder-color);
}

@media screen and (max-width: 480px) {
	.menu-h48 {
		/* 32(default) -> 36 */
		.btn { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;}
		.btn > span:not([class]) {padding: 0 8px}
		.btn ws-icon.btn-left-icon {width: 28px; height: 28px;}
		.btn ws-icon.btn-right-icon {width: 20px; height: 20px;}
		.btn ws-icon.btn-box-small {width: 20px; height: 20px;}
		.btn ws-icon.btn-box-big {width: 28px; height: 28px;}
		.btn ws-icon {--icon-size: 20px;}

		/* 24 -> 32 */
		.btn.btn-24 { --btn-size: 32px; height: 32px; font-size: 13px; padding: 0 6px; border-radius: 7px;}
		.btn.btn-24 > span:not([class]) {padding: 0 6px}
		.btn.btn-24 ws-icon.btn-left-icon {width: 28px; height: 28px;}
		.btn.btn-24 ws-icon.btn-right-icon {width: 20px; height: 20px;}
		.btn.btn-24 ws-icon.btn-box-small {width: 20px; height: 20px;}
		.btn.btn-24 ws-icon.btn-box-big {width: 28px; height: 28px;}
		.btn.btn-24 ws-icon {--icon-size: 20px;}

		/* 28 -> 36 */
		.btn.btn-28 { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;}
		.btn.btn-28 > span:not([class]) {padding: 0 8px}
		.btn.btn-28 ws-icon.btn-left-icon {width: 28px; height: 28px;}
		.btn.btn-28 ws-icon.btn-right-icon {width: 20px; height: 20px;}
		.btn.btn-28 ws-icon.btn-box-small {width: 20px; height: 20px;}
		.btn.btn-28 ws-icon.btn-box-big {width: 28px; height: 28px;}
		.btn.btn-28 ws-icon {--icon-size: 20px;}

		/* 32 -> 36 */
		.btn.btn-32 { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;}
		.btn.btn-32 > span:not([class]) {padding: 0 8px}
		.btn.btn-32 ws-icon.btn-left-icon {width: 28px; height: 28px;}
		.btn.btn-32 ws-icon.btn-right-icon {width: 20px; height: 20px;}
		.btn.btn-32 ws-icon.btn-box-small {width: 20px; height: 20px;}
		.btn.btn-32 ws-icon.btn-box-big {width: 28px; height: 28px;}
		.btn.btn-32 ws-icon {--icon-size: 20px;}

		/* special buttons */
		.menu__group-taskButs {
			.btn { --btn-size: 48px; height: 48px;font-size: 14px;padding: 0 12px;border-radius: 10px;}
			.btn > span:not([class]) {padding: 0 8px}
			.btn ws-icon.btn-left-icon {width: 32px; height: 32px;}
			.btn ws-icon.btn-right-icon {width: 24px; height: 24px;}
			.btn ws-icon {--icon-size: 24px;}
		}
	}
}