/**
 * @desc классы вида _*   		= меняющие отображение или состояние (_a активный | _o открытый | _s отображаемый | _c checked выбранныйb| _f фокус | _h скрытый | _dis disabled запрещенный | _l слева | _r справа | _w wait лоайдинг | _hc добавлет стрелку к названию)
 * @desc классы вида __*  		= интерактивные объекты (__inp поле ввода  |  __text  текстареа  |  __ckbx чекбокс  |  __rdo радио | __pm кнопка +/- например  | __btn кнопка крупная  |  __bis малая кнопка с иконкой плоская без текста  |  __ddbtn кнопка вызова выпадающего меню  |   __tab вкладка  |  __q вопросик для всплывания подсказки)
 *
 * @desc классы вида _do		= указывает на ajax интерактивность объекта см класс _do-*
 * @desc классы вида _js		= указывает на интерактивность объекта см класс _js-* (без взаимодействия с сервером)
 *
 * @desc классы вида _size-* 	= меняющие размер
 * @desc классы вида _color-* 	= меняющие цвет
 * @desc классы вида _can-*		= определют возможности вложенных объектов (_can-clr есть крестик чистки значения)
 * @desc классы вида _add-*		= добавочные условия (_add-icon кнопка c добавленной иконкой плюсом к тексту)
 * @desc классы вида _no-*		= дополнительные ограничения (_no-text кнопка без текста, значит иконка)
 * @desc классы вида _do-*		= определют ajax действия у интерактивного элемента
 * @desc классы вида _js-*		= определют действия у интерактивного элемента
 * @desc классы вида _i | _i-*	= определяют класс иконки (_i общее | _i-return иконка гнутой стрелки возврата | _i-loading спиннер загрузки)
 * 
 * @desc классы вида *--link	= определяют класс управления ссылками
 * @desc классы вида *--chck	= определяют класс управления checkbox`ами
 * @desc классы вида *--pics	= определяют класс управления картинками
 * @desc классы вида *--chng	= определяют класс изменения объекта
 * @desc классы вида *--add		= определяют класс создания объекта
 *
 * @desc классы структуры _lv-* = определяют уровень вложенности элементов
 */


.form {display: flex; flex-direction: column; width:100%;}
.form .form-row{display: flex; flex-direction: row; width: 100%;}
.form .form-cell{vertical-align: top; text-align: left; padding:var(--space-xs) var(--space-xs) var(--space-m);}
.form .form-cell_label{
	width:30%;
	font-size: var(--size-typo-label);
	line-height: var(--line-height-label);
}
.form .form-cell_control{flex-grow: 1;}
.block-tovar .form .form-cell_control {width: 70%;}

.form .form-row.text {display: flex; flex-direction: column; width:100%;}
.form .text .form-cell{width:100%;}
.form .text .form-cell_label {width: 100%; padding:var(--space-xs) var(--space-xs) var(--space-xxs);}
.form .text .form-cell_control {width: 100%; padding:var(--space-xxs) var(--space-xs) var(--space-m);}

/**
 * сам блок с полем ввода, крестиком, видимой подписью, вопросиком
 */
.input{
	position:relative;
	display:inline-block;
	width:100%;
}
/**
 * обёртка, для реализаии outline при :focus 
 */
.input-box {
	cursor: text;
	position: relative;
	display: block;
}
.input-box:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	content: '';
	background-clip: padding-box;

	/* changing on theme */
	border: 1px solid var(--color-border-input);
	background-color: var(--color-bg-input);
	border-radius: var(--radius-s);
}
.input:hover .input-box:before {
	border-color: var(--color-border-input-hover);
}
.input._a .input-box:before,
.input:focus-within .input-box:before {
	border: 2px solid var(--color-border-input-focus);
}

.input._w .input-box:before {
	background-image:url('/i/bg_loadingbar_grey.svg');
	background-repeat: no-repeat;
	background-size:cover;
}

/**
 * справа есть вопросик с подсказкой
 */
.input._can-help .input-box {width: calc(100% - 33px);}

.input._can-help .__q {position: absolute; right: 8px; top:8px;}

/**
 * сам инпут, .__inp = поле с данными
 */
.__inp {
	width: 100%;
	height: var(--size-box-input-height);
	line-height: var(--line-height-input);
	border-right-width: var(--space-xs);
	border-left-width: var(--space-m);
	color: var(--color-typo-input-value);
	font-size: var(--size-typo-input);
}
.__text {
	width: 100%;
	height: var(--size-box-textarea-height);
	border-right-width: var(--space-xs);
	border-left-width: var(--space-m);
	color: var(--color-typo-input-value);
	font-size: var(--size-typo-input);
}

.__link {
	display: block;
	position: relative;
	width: 100%;
	border-right-width: var(--space-xs);
	border-left-width: var(--space-m);
	color: var(--color-typo-input-value);
	font-size: var(--size-typo-input);
}

.__inp::placeholder,
.__text::placeholder {
	color: var(--color-typo-input-placeholder);
}

/**
 * справа внутри поля есть крестик очистки значения
 */
._can-clr .__inp,
._can-clr .__text {
	border-right-width: var(--size-box-input-height);
}

.__inp._add-icon {
	border-left-width: var(--size-box-input-height);
	background-size: 14px;
	background-position: left -22px center;
}
._i-savelast {
	background-image:url('/i/ico_save-last.svg');
	background-repeat: no-repeat;
}


.__clr{
	background-color: transparent;
    -webkit-mask:  url('/i/i.svg#cross') no-repeat;
    mask: url('/i/i.svg#cross') no-repeat;

	position:absolute;
	z-index:5;
	top:0;
	right:0;
	cursor: pointer;
	pointer-events:none;
	opacity:0;
	visibility: hidden;

	width:var(--size-box-input-height);
	height:var(--size-box-input-height);
}
._can-clr .__clr {
	opacity:1; 
	visibility: visible; 
	pointer-events: auto; 
	background-color: var(--color-svgfill-clear-center);
	-webkit-transition:background-color var(--duration);
	transition:background-color var(--duration);
}
._can-clr .__clr:hover {background-color: var(--color-svgfill-clear-center-hover);}

.select._can-clr .__clr {right:var(--size-box-input-height);}


.__q {
	display: inline-block;
	cursor: pointer;
	width:16px;
	height:16px;
	vertical-align: middle;
	background-size:contain;
	background-repeat: no-repeat;
	visibility: visible;

	background-color: var(--color-svgfill-quest-center);
    -webkit-mask:  url('/i/ico_help-xs.svg') no-repeat;
    mask: url('/i/ico_help-xs.svg') no-repeat;

    -webkit-transition:background-color var(--duration);
	transition:background-color var(--duration);
}
.__q:hover {background-color: var(--color-svgfill-quest-center-hover);}



.input .input-ann {margin:var(--space-xs) var(--space-m);}


._dis {}
._dis .__clr{display:none;}

.input._dis .input-box {
	pointer-events:none;
}
.input._dis .input-box:before{
	border: 1px solid var(--color-border-input-disabled);
	background-color: var(--color-bg-input-disabled);
}
.input._dis .__inp,
.input._dis .__text {
	color:var(--color-typo-input-disabled);
}