/* ==========================================================================================
=> CMS GIRVAS (https://www.cms-girvas.ru/)
=>
=> Типовая стилизация форм CMS
=>
=> @link      https://gitflic.ru/project/garbalo/cms-girvas Путь до репозитория системы
=> @copyright Copyright (c) 2022 - 2024, Andrey Shestakov & Garbalo (https://www.garbalo.com/)
=> @license   https://gitflic.ru/project/garbalo/cms-girvas/LICENSE.md
============================================================================================= */

.form__input, .form__textarea, .form__select {
  box-sizing: border-box;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  outline: 0;
  padding: 10px;
  transition: background-color .2s, border-color .2s;
}

.form__input {
  background-color: var(--primary-color-4);
  border-color: var(--primary-color-2);
}

.form__input:hover {
  border-color: var(--primary-color-1);
}

.form__input:focus {
  border-color: var(--primary-color-1);
}

.form__input:active {
  border-color: var(--primary-color-1);
}

.form__input:invalid,
.form__textarea:invalid {
  background-color: var(--common-secondary-color-5);
  border-color: var(--common-secondary-color-6);
}

.form__select {
  background-color: var(--primary-color-4);
  border-color: var(--primary-color-2);
}

.form__select:hover {
  border-color: var(--primary-color-1);
}

.form__select:focus {
  border-color: var(--primary-color-1);
}

.form__select:active {
  border-color: var(--primary-color-1);
}

.form__textarea {
  background-color: var(--primary-color-4);
  border-color: var(--primary-color-2);
}

.form__textarea:hover {
  border-color: var(--primary-color-1);
}

.form__textarea:focus {
  border-color: var(--primary-color-1);
}

.form__textarea:active {
  border-color: var(--primary-color-1);
}

.form__input:disabled,
.form__textarea:disabled {
  background-color: #EAEAEA;
}

.form__button, .form__input_submit {
  box-sizing: border-box;
  background-color: var(--primary-color-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color-3);
  text-transform: uppercase;
  border: 0;
  outline: 0;
  padding: 10px;
  transition: background-color .2s, color .2s;
  cursor: pointer;
}

.form__button:hover, .form__input_submit:hover{
  background-color: var(--primary-color-1);
  color: var(--primary-color-4);
}

.form__button:focus, .form__input_submit:focus {
  background-color: var(--primary-color-1);
  color: var(--primary-color-4);
}

.form__button:active, .form__input_submit:active {
  background-color: var(--common-secondary-color-3);
}

.form__checkbox-container {
  position: relative;
  background-color: var(--primary-color-3);
  width: 72px;
  height: 40px;
}

.form__checkbox-container .checkbox-container__input {
  display: none;
}

.form__checkbox-container .checkbox-container__label {
  position: absolute;
  display: block;
  box-sizing: border-box;
  background-color: #CCCCCC;
  border-width: 4px;
  border-style: solid;
  border-color: var(--primary-color-4);
  padding: 4px;
  width: 32px;
  height: 32px;
  top: 4px;
  left: 4px;
  transition: left .2s, background-color .2s;
  cursor: pointer;
}

.form__checkbox-container .checkbox-container__input:checked + .checkbox-container__label {
  background-color: #232323;
  left: calc(100% - 32px - 4px);
}

.form__input-container {
  position: relative;
}

.form__input-container.input-container_flex-checkbox {
  display: flex;
}

.form__input-container.input-container_flex-checkbox > input[type="checkbox"] {
  margin-right: 10px;
  margin-bottom: 0 !important;
  width: fit-content !important;
  height: fit-content !important;
}

.form__input-container.input-container_flex-checkbox > .label {
  font-style: italic;
  font-size: 12px;
}