/**
 * Кнопки 
 */

.btn-wrap {margin:20px; text-align: center;}

.__btn {
	display: inline-block;
	min-width:108px;
	min-height: 28px;
	background-color: var(--color-bg-button);
	background-position: center;
	background-size: 0;
	border:2px solid var(--color-border-button);
	border-radius: var(--radius-button);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	margin: 0 var(--space-xxxs:);
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);

	color:var(--color-typo-button);

	-webkit-transition:var(--duration);
	/* transition: color background-color  border-color var(--duration), border-radius background-size var(--duration-m); */
	transition:var(--duration);
}
.__btn.save {
	color:var(--color-typo-button);
	background-color: var(--color-bg-button-save);
	border-color: var(--color-border-button-save);
}
.__btn.delete {
	color:var(--color-typo-button);
	background-color: var(--color-bg-button-delete);
	border-color: var(--color-border-button-delete);
}

.__btn:hover {
	color:var(--color-typo-button-hover);
	background-color: var(--color-bg-button-hover); 
	border-color: var(--color-border-button-hover);
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}
.__btn.save:hover {
	color:var(--color-typo-button-save-hover);
	background-color: var(--color-bg-button-save-hover);
	border-color: var(--color-border-button-save-hover);
}
.__btn.delete:hover {
	color:var(--color-typo-button-delete-hover);
	background-color: var(--color-bg-button-delete-hover);
	border-color: var(--color-border-button-delete-hover);
}

.__btn:active {
	color:var(--color-typo-button-active);
	background-color: var(--color-bg-button-active);
	border-color: var(--color-border-button-active);
	box-shadow: none;
}
.__btn.save:active {
	color:var(--color-typo-button-save-active);
	background-color: var(--color-bg-button-save-active);
	border-color: var(--color-border-button-save-active);
}
.__btn.delete:active {
	color:var(--color-typo-button-delete-active);
	background-color: var(--color-bg-button-delete-active);
	border-color: var(--color-border-button-delete-active);
}

.__btn .btn-text{
	font-size: var(--size-typo-button);
	line-height: var(--line-height-button);
	margin:0 16px;

	position: relative;
	display: inline-block;
	resize: none;
	white-space: nowrap;
	pointer-events: none;
}

.__btn._w {
	color:transparent;
	background-color: var(--color-bg-button-active);
	box-shadow: none;
	background-image:url('/i/bg_loadingbar_white.svg');
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	pointer-events: none;
}
.__btn.save._w {background-color: var(--color-bg-button-save-active);}
.__btn.delete._w {background-color: var(--color-bg-button-delete-active);}

.__btn._w .btn-text {
	color:transparent;
	background-image: url('/i/ico_dots-ani.svg');
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: center;
}

._w2{
	min-width: 28px;
	width: 32px;
	border-radius: 16px;
	background-image: url('/i/ico_spinner.svg');
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
}
._w2 .btn-text {
    opacity: 0;
    pointer-events: none;
}

.__btn._no-text {
	min-width:28px;
	min-height:28px;
	color:transparent;
	border-color: var(--color-bg-button-icon);
	background-color: var(--color-bg-button-icon);
}
.__btn .btn-icon{
	display: inline-block;
	width:26px;
	height:26px;
	margin:1px;
	background-position: center;
	background-color: var(--color-svgfill-button-center);

	-webkit-transition:var(--duration);
	transition:var(--duration);
}

.__btn._no-text:hover {	
	border-color: var(--color-border-button-icon-hover);
	background-color: var(--color-bg-button-icon-hover);
}
.__btn._no-text:active {
	border-color: var(--color-border-button-icon-active);
	background-color: var(--color-bg-button-icon-active);
}

.__btn:hover .btn-icon{background-color: var(--color-svgfill-button-center-hover);}
.__btn:active .btn-icon{background-color: var(--color-svgfill-button-center-active);}


.__btn._i-return .btn-icon {
	-webkit-mask:  url('/i/ico_return.svg') no-repeat;
	mask: url('/i/ico_return.svg') no-repeat;
}
.__btn._i-r2b .btn-icon {
	-webkit-mask:  url('/i/ico_r2b.svg') no-repeat;
	mask: url('/i/ico_r2b.svg') no-repeat;
}
.__btn._i-b2r .btn-icon {
	-webkit-mask:  url('/i/ico_b2r.svg') no-repeat;
	mask: url('/i/ico_b2r.svg') no-repeat;
}

.__btn._size-xs {min-width: 60px; min-height: 22px; border-width: 1px;}
.__btn._size-xs .btn-text{
	font-size: var(--size-typo-button-xs);
	line-height: var(--line-height-button-xs);
	margin:0 8px;
}


.__bis {
	display: inline-block;
	width:24px;
	height:24px;
	background-color: var(--color-bg-button-icon-xs);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	border:none;
	border-radius: var(--radius-button-icon-xs);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	margin: 0 var(--space-xxs:);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);

	-webkit-transition:var(--duration);
	transition:var(--duration);
}

.__bis:hover {
	background-color: var(--color-bg-button-icon-xs-hover);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}
.__bis:active {
	background-color: var(--color-bg-button-icon-xs-active);
	box-shadow: none;
}

.__bis ._i {
	display: inline-block;
	width:16px;
	height:16px;
	margin:4px;
	background-position: center;
	background-size: 16px;
	background-color: var(--color-svgfill-button-icon-xs);

	-webkit-transition:var(--duration);
	transition:var(--duration);
}
.__bis:hover ._i{background-color: var(--color-svgfill-button-icon-xs-hover);}
.__bis:active ._i{background-color: var(--color-svgfill-button-icon-xs-active);}

.__btn-xs {
	display: inline-block;
	width:24px;
	height:24px;
	border:none;
	border-radius: var(--radius-button-icon-xs);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	margin: 0 var(--space-xxs:);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);

	-webkit-transition:var(--duration);
	transition:var(--duration);
}

.__btn-xs:hover {
	background-color: #F8F8F8;
}
.__btn-xs:active {
	background-color: #F8F8F8;
}

.__btn-xs ._i {
	display: inline-block;
	width:24px;
	height:24px;
	margin:4px;
	background-position: center;
	background-size: 24px;
	background-color: var(--color-svgfill-button-icon-xs);

	-webkit-transition:var(--duration);
	transition:var(--duration);
	margin: 0;
}
.__btn-xs:hover ._i{}
.__btn-xs:active ._i{}

.__sh {
	display: inline-block;
	width:24px;
	height:24px;
	border:none;
	border-radius: var(--radius-button-icon-xs);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	margin: 0 var(--space-xxs:);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);

	-webkit-transition:var(--duration);
	transition:var(--duration);
}

.__sh:hover {
	background-color: #F8F8F8;
}
.__sh:active {
	background-color: #F8F8F8;
}

.__sh ._i {
	display: inline-block;
	width:24px;
	height:24px;
	margin:4px;
	background-position: center;
	background-size: 24px;
	background-color: var(--color-svgfill-button-icon-xs);

	-webkit-transition:var(--duration);
	transition:var(--duration);
	margin: 0;
}
.__sh:hover ._i{}
.__sh:active ._i{}

.__pm {
	cursor: pointer;
	-webkit-mask:  url('/i/i.svg#plus') no-repeat center;
	mask: url('/i/i.svg#plus') no-repeat center;
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	mask-size: 24px;
}

._o > div > .__pm {
	-webkit-mask:  url('/i/i.svg#minus') no-repeat center 23px;
	mask: url('/i/i.svg#minus') no-repeat center;
	mask-size: 24px;
}

.__sh {
	cursor: pointer;
	width: 24px;
	height: 24px;
	mask-size: 30px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 3px;
}

._s > .__sh {
	-webkit-mask:  url('/i/ico_sh1.svg') no-repeat center;
	mask: url('/i/ico_sh1.svg') no-repeat center;	
}