// Поля ввода: input, textarea, combobox, select

@mixin docplat-new-field-box {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--INPUT-BORDER);
  border-radius: var(--INPUT-RADIUS);
  background: var(--WHITE);
  color: var(--INPUT-VALUE-FILLED);
  font-family: var(--font-medium);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease;

  &::placeholder {
    color: var(--INPUT-PLACEHOLDER);
    opacity: 1;
  }

  &:hover:not(:disabled):not([readonly]):not(:focus) {
    border-color: var(--INPUT-BORDER-HOVER);
  }

  &:focus,
  &:focus:hover {
    border-color: var(--PRIMARY);
    outline: none;
  }

  &:disabled,
  &[readonly] {
    background: #f4f6f8;
    cursor: not-allowed;
  }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input {
  box-shadow: none !important;
}

// label всегда у верхнего края (Material иначе считает top от padding infix)
@mixin docplat-new-floating-label-top {
  .mdc-text-field .mdc-floating-label,
  .mdc-text-field .mat-mdc-floating-label,
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label,
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mdc-floating-label {
    top: 0 !important;
    transform: none !important;
    transform-origin: left top !important;
  }

  .mdc-text-field--filled .mdc-floating-label--float-above,
  .mdc-text-field--filled:not(.mdc-text-field--focused) .mdc-floating-label,
  .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label,
  .mat-form-field-hide-placeholder .mat-mdc-floating-label,
  &.mat-focused .mdc-text-field .mdc-floating-label,
  &.mat-focused .mdc-floating-label--float-above,
  &.mat-mdc-form-field.mat-focused .mdc-floating-label--float-above,
  &.mat-mdc-form-field.mat-focused .mdc-text-field .mdc-floating-label--float-above {
    top: 0 !important;
    transform: none !important;
  }
}

// ——— Mat-form-field (core-field-string, phone, password, email, date и т.д.) ———
.mat-mdc-form-field {
  width: 100%;

  .mat-mdc-text-field-wrapper {
    padding: 0;
    background: transparent;
  }

  .mat-mdc-form-field-flex {
    position: relative;
    align-items: flex-start;
  }

  .mat-mdc-form-field-infix {
    padding: 18px 0 3px;
    min-height: auto;
    // width: 100%;
  }

  // &:has(textarea) .mat-mdc-form-field-infix {
  //   padding-top: 30px;
  // }

  .mdc-line-ripple,
  .mat-mdc-form-field-focus-overlay {
    display: none;
    background: transparent;
  }

  // основной бокс (без иконок — симметричный отступ)
  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
    @include docplat-new-field-box;
    min-height: var(--INPUT-HEIGHT);
    padding: 0 var(--INPUT-PADDING-X) 0 var(--INPUT-PADDING-X);
    margin: 0;
  }

  textarea.mat-mdc-form-field-input-control,
  textarea.mdc-text-field__input {
    @include docplat-new-field-box;
    min-height: 96px;
    padding: 12px var(--INPUT-PADDING-X);
    resize: vertical;
    line-height: 1.45;
  }

  &.mat-focused {
    .mat-mdc-form-field-input-control,
    textarea.mat-mdc-form-field-input-control {
      border-color: var(--PRIMARY);

      &:hover {
        border-color: var(--PRIMARY);
      }
    }
  }

  @include docplat-new-floating-label-top;

  .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,
  .mdc-text-field--filled.mdc-text-field--disabled .mdc-text-field__input {
    color: var(--INPUT-VALUE-FILLED);

    &::placeholder {
      color: var(--INPUT-PLACEHOLDER);
      opacity: 1;
    }
  }

  // label всегда сверху, без смещения при фокусе/клике
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label,
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mdc-floating-label,
  .mdc-text-field .mdc-floating-label {
    left: 0 !important;
    left: var(--INPUT-PADDING-X);
    right: auto;
    font-family: var(--font-medium);
    font-size: 13px !important;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--DARK-GREY);
    position: absolute;
    z-index: 4;
    max-width: calc(100% - 28px);
    pointer-events: none;
    transition: color 0.15s ease;
  }

  mat-label.sln-gray-label,
  mat-label.sln-default-label {
    background: transparent;
    padding: 0;
    color: var(--DARK-GREY);
  }

  &.mat-focused {
    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label,
    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mdc-floating-label {
      color: var(--PRIMARY);
    }
  }

  .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
    color: var(--DANGER);
    margin-left: 2px;
  }

  // ошибки / валидация
  input.ng-touched.ng-invalid,
  textarea.ng-touched.ng-invalid,
  .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input {
    border-color: var(--DANGER) !important;
  }

  // счётчик и подсказки
  .mat-mdc-form-field-subscript-wrapper {
    display: none;
  }

  mat-hint {
    display: block;
    color: var(--GRAY-SOFT);
    font-family: var(--font);
    font-size: 10px;
    line-height: 1.3;
  }

  .mat-mdc-form-field-hint-wrapper {
    padding: 0;
  }

  .mat-mdc-form-field-hint-spacer {
    flex: 1 1 auto;
  }

  // иконки справа (поиск, календарь, глаз)
  .mat-mdc-form-field-icon-suffix,
  .sln-informer-icongroup {
    position: absolute;
    right: 12px;
    transform: translateY(-50%);
    z-index: 3;
    padding: 0;
    top: var(--FIELD-SUFFIX-TOP, 41px);
  }

  &:has(textarea) .mat-mdc-form-field-icon-suffix,
  &:has(textarea) .sln-informer-icongroup {
    top: var(--FIELD-SUFFIX-TOP-TEXTAREA, 14px);
    transform: none;
  }
}

// Увеличенный правый padding только если в поле реально есть иконка.
// Не :has(.sln-core-field-*-p-info) — обёртка p-info в шаблоне всегда в DOM.
.sln-field-layout:has(
  .sln-common-control-rub,
  .sln-control-percent,
  .sln-control-question,
  .sln-control-mistake,
  .sln-control-time,
  .sln-control-eye,
  .sln-control-close-eye
),
.mat-mdc-form-field:has(.mat-mdc-form-field-icon-suffix) {
  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
    padding: 0 var(--INPUT-PADDING-R-ICON) 0 var(--INPUT-PADDING-X) !important;
  }
}

// structure/_mat-form-field.scss: :has(.sln-core-field-number-p-info) ;
.sln-field-layout:has(.sln-core-field-number-p-info):not(
  :has(
    .sln-common-control-rub,
    .sln-control-percent,
    .sln-control-question,
    .sln-control-mistake
  )
) {
  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
    padding: 0 var(--INPUT-PADDING-X) 0 var(--INPUT-PADDING-X) !important;
  }
}

// ——— Combobox (mat-select) ———
// Подпись только в mat-label сверху; placeholder mat-select дублировал текст
.sln-core-field-combobox {
  .mat-mdc-select-placeholder {
    display: none !important;
  }

  mat-select {
    @include docplat-new-field-box;
    min-height: var(--INPUT-HEIGHT);
    padding: 0 var(--INPUT-PADDING-X) 0 var(--INPUT-PADDING-X);
    display: flex;
    align-items: center;

    .mat-mdc-select-trigger {
      min-height: 22px;
      align-items: center;
    }

    .mat-mdc-select-value {
      color: var(--DARK-GREY);
      font-family: var(--font-medium);
      font-size: 14px;
    }

    .mat-select-custom-placeholder {
      color: var(--DARK-GREY);
      font-family: var(--font-medium);
      font-size: 14px;
    }
  }

  .mat-mdc-select-arrow {
    color: var(--MIDLE-GRAY);
  }

  .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
    transform: translateY(-8px);
    align-items: center;
  }
}

// выпадающие списки
.mat-mdc-select-panel,
.mat-mdc-menu-panel,
.mat-mdc-menu-content {
  border-radius: var(--INPUT-RADIUS) !important;
  border: 1px solid var(--LIGHT-GRAY);
  box-shadow: var(--MODAL-SHADOW);
}

.mat-mdc-option {
  font-family: var(--font-medium);
  font-size: 14px;
  color: var(--DARK-GREY);

  &.mdc-list-item--selected,
  &:hover {
    background: #eef3fc !important;
  }
}

// ——— Нативные инпуты ———
input.sln-input,
.search-input,
.sln-core-certificate-list .search-input {
  @include docplat-new-field-box;
  min-height: var(--INPUT-HEIGHT);
  padding: 0 var(--INPUT-PADDING-X) 0 var(--INPUT-PADDING-X);
}

// ——— Auth: без звёздочки required в лейбле ———
.sln-auth-signin-form {
  .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
    content: none;
  }
}

// ——— Размеры полей: sln-input-xs | sln-input-s и т.д. ———
// Класс на host (core-field-string.sln-input-s) или на mat-form-field через cmpClass

@mixin docplat-new-input-size(
  $height,
  $font-size,
  $label-size,
  $infix-padding-top,
  $icon-top
) {
  @include docplat-new-floating-label-top;

  .mat-mdc-form-field-infix {
    padding-top: $infix-padding-top;
  }

  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control,
  textarea.mat-mdc-form-field-input-control {
    min-height: $height;
    font-size: $font-size;
  }

  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label,
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mdc-floating-label,
  .mdc-text-field .mdc-floating-label,
  mat-label {
    font-size: $label-size !important;
  }

  .mat-mdc-form-field-icon-suffix,
  .sln-informer-icongroup {
    top: $icon-top;
  }

  mat-select {
    min-height: $height;
    font-size: $font-size;
    padding-top: 0;
    padding-bottom: 0;

    .mat-mdc-select-value,
    .mat-select-custom-placeholder {
      font-size: $font-size;
    }
  }
}

// класс на самом input (legacy / cmpClass на control)
.mat-mdc-form-field:has(.mat-mdc-form-field-input-control.sln-input-xs) {
  @include docplat-new-input-size(
    var(--INPUT-HEIGHT-XS),
    var(--INPUT-FONT-XS),
    var(--INPUT-LABEL-XS),
    var(--INPUT-INFIX-PAD-XS),
    var(--FIELD-SUFFIX-TOP-XS, 26px)
  );
}

.mat-mdc-form-field:has(.mat-mdc-form-field-input-control.sln-input-s) {
  @include docplat-new-input-size(
    var(--INPUT-HEIGHT-S),
    var(--INPUT-FONT-S),
    var(--INPUT-LABEL-S),
    var(--INPUT-INFIX-PAD-S),
    var(--FIELD-SUFFIX-TOP-S, 31px)
  );
}

.mat-mdc-form-field:has(.mat-mdc-form-field-input-control.sln-input-l) {
  @include docplat-new-input-size(
    var(--INPUT-HEIGHT-L),
    var(--INPUT-FONT-L),
    var(--INPUT-LABEL-L),
    var(--INPUT-INFIX-PAD-L),
    var(--FIELD-SUFFIX-TOP-L, 50px)
  );
}

.mat-mdc-form-field:has(.mat-mdc-form-field-input-control.sln-input-xl) {
  @include docplat-new-input-size(
    var(--INPUT-HEIGHT-XL),
    var(--INPUT-FONT-XL),
    var(--INPUT-LABEL-XL),
    var(--INPUT-INFIX-PAD-XL),
    var(--FIELD-SUFFIX-TOP-XL, 67px)
  );
}

// xs
.sln-input-xs,
core-field-string.sln-input-xs,
core-field-number.sln-input-xs,
core-field-email.sln-input-xs,
core-field-phone.sln-input-xs,
core-field-date.sln-input-xs,
core-field-datetime.sln-input-xs,
core-field-combobox.sln-input-xs,
core-field-ip.sln-input-xs {
  .mat-mdc-form-field,
  &.mat-mdc-form-field {
    @include docplat-new-input-size(
      var(--INPUT-HEIGHT-XS),
      var(--INPUT-FONT-XS),
      var(--INPUT-LABEL-XS),
      var(--INPUT-INFIX-PAD-XS),
      var(--FIELD-SUFFIX-TOP-XS, 26px)
    );
  }
}

// s
.sln-input-s,
core-field-string.sln-input-s,
core-field-number.sln-input-s,
core-field-email.sln-input-s,
core-field-phone.sln-input-s,
core-field-date.sln-input-s,
core-field-datetime.sln-input-s,
core-field-combobox.sln-input-s,
core-field-ip.sln-input-s,
.sln-core-field-combobox.sln-input-s {
  .mat-mdc-form-field,
  &.mat-mdc-form-field {
    @include docplat-new-input-size(
      var(--INPUT-HEIGHT-S),
      var(--INPUT-FONT-S),
      var(--INPUT-LABEL-S),
      var(--INPUT-INFIX-PAD-S),
      var(--FIELD-SUFFIX-TOP-S, 31px)
    );
  }

  .sln-common-calendar {
    background-size: 15px;
    width: 15px;
    height: 15px;
  }

  .sln-core-field-datetime-p-info {
    top: 19px !important;
  }
}

// l
.sln-input-l,
core-field-string.sln-input-l,
core-field-number.sln-input-l,
core-field-email.sln-input-l,
core-field-phone.sln-input-l,
core-field-date.sln-input-l,
core-field-datetime.sln-input-l,
core-field-combobox.sln-input-l,
core-field-ip.sln-input-l {
  .mat-mdc-form-field,
  &.mat-mdc-form-field {
    @include docplat-new-input-size(
      var(--INPUT-HEIGHT-L),
      var(--INPUT-FONT-L),
      var(--INPUT-LABEL-L),
      var(--INPUT-INFIX-PAD-L),
      var(--FIELD-SUFFIX-TOP-L, 50px)
    );
  }
}

// xl
.sln-input-xl,
core-field-string.sln-input-xl,
core-field-number.sln-input-xl,
core-field-email.sln-input-xl,
core-field-phone.sln-input-xl,
core-field-date.sln-input-xl,
core-field-datetime.sln-input-xl,
core-field-combobox.sln-input-xl,
core-field-ip.sln-input-xl {
  .mat-mdc-form-field,
  &.mat-mdc-form-field {
    @include docplat-new-input-size(
      var(--INPUT-HEIGHT-XL),
      var(--INPUT-FONT-XL),
      var(--INPUT-LABEL-XL),
      var(--INPUT-INFIX-PAD-XL),
      var(--FIELD-SUFFIX-TOP-XL, 67px)
    );
  }
}

// нативные инпуты (.sln-input + размер)
input.sln-input.sln-input-xs,
input.sln-input.sln-input-s,
input.sln-input.sln-input-l,
input.sln-input.sln-input-xl {
  @include docplat-new-field-box;
  padding: 0 var(--INPUT-PADDING-X);
}

input.sln-input.sln-input-xs {
  min-height: var(--INPUT-HEIGHT-XS);
  font-size: var(--INPUT-FONT-XS);
}

input.sln-input.sln-input-s {
  min-height: var(--INPUT-HEIGHT-S);
  font-size: var(--INPUT-FONT-S);
}

input.sln-input.sln-input-l {
  min-height: var(--INPUT-HEIGHT-L);
  font-size: var(--INPUT-FONT-L);
}

input.sln-input.sln-input-xl {
  min-height: var(--INPUT-HEIGHT-XL);
  font-size: var(--INPUT-FONT-XL);
}

// combobox / multiple-combobox в фильтрах грида
.sln-core-field-combobox.sln-input-s mat-select {
  min-height: var(--INPUT-HEIGHT-S);
  font-size: var(--INPUT-FONT-S);
  padding: 0 var(--INPUT-PADDING-X) 0 var(--INPUT-PADDING-X);
}

.multiple-combobox-with-btn:has(.sln-input-s) mat-select {
  min-height: var(--INPUT-HEIGHT-S);
  font-size: var(--INPUT-FONT-S);
  padding: 0 var(--INPUT-PADDING-R-ICON) 0 var(--INPUT-PADDING-X);
}

// combobox sln-input-s в фильтре грида (кнопка +/- справа)
.sln-column-filter-template:has(.sln-column-filter-template-btn) {
  core-field-combobox.sln-input-s,
  .sln-core-field-combobox.sln-input-s {
    .mat-mdc-form-field mat-select {
      padding-right: 30px;
    }

    .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
      transform: translate(-4px, -8px);
    }
  }
}

// класс размера на host / обёртке (фильтры грида: .sln-input-s .mat-mdc-form-field …)
.sln-input-xs,
.sln-input-s,
.sln-input-l,
.sln-input-xl {
  .mat-mdc-form-field {
    @include docplat-new-floating-label-top;
  }
}
