@use "mixins" as *;

mat-form-field {
  mat-label.sln-default-label {
    padding: 0 5px 0 5px;
    color: var(--MIDLE-GRAY);
    font-family: var(--font-medium);
    opacity: 1;
    background: white;
  }
  mat-label.sln-gray-label {
    background-color: #f8f9fb;
    padding: 0px 2px 0px 5px;
    color: var(--MIDLE-GRAY);
    font-family: var(--font-medium);
  }
}

// icons
.mat-mdc-form-field-bottom-align::before {
  content: none !important;
}

// label
.mdc-form-field > label {
  line-height: normal;
}

// input
.mat-mdc-form-field {
  position: relative;
  width: 100%;
  .mat-mdc-text-field-wrapper {
    padding: 0;
    min-height: auto;
    max-height: 100%;
  }
  // input
  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
    @include input_default;
  }
  textarea.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
    padding: 10px;
  }
  .mat-mdc-form-field-infix {
    padding: 5px 0;
    min-height: auto;
  }
  .mat-mdc-form-field-input-control.sln-input-xs {
    min-height: calc(45px / 2);
    font-size: 12px !important;
  }
  .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled)
    .mdc-text-field__input {
    border-color: var(--DANGER);
  }
  .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(--MIDLE-GRAY);
  }
  .mat-mdc-form-field-input-control.sln-input-s {
    min-height: calc(45px - 15px);
    font-size: 13px;
    .mdc-floating-label {
      top: 16px;
      font-size: 14px;
    }
  }
  .mat-mdc-form-field-input-control.sln-input-l {
    min-height: calc(45px + 15px);
  }
  .mat-mdc-form-field-input-control.sln-input-xl {
    min-height: calc(45px * 2);
  }
  .mat-mdc-form-field-icon-suffix {
    padding: 0;
  }
  input.ng-touched.ng-invalid {
    border-color: var(--DANGER);
  }
  input.ng-touched.ng-valid {
    background-color: 1.4px solid var(--GRAY) !important;
  }
  .mdc-floating-label--required:not(
      .mdc-floating-label--hide-required-marker
    )::after {
    color: var(--DANGER);
    background: var(--WHITE);
  }
  .mdc-floating-label--required:not(
      .mdc-floating-label--hide-required-marker
    )::after {
    margin-left: -3px;
    padding-right: 5px;
  }
  .mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
    margin: 0;
  }
  .mdc-text-field--filled .mdc-floating-label--float-above {
    transform: translateY(-30px) scale(0.75);
  }
  // label
  label {
    font-size: 14px;
    padding-left: 8px;
    max-width: 96%;
    mat-label {
      color: var(--MIDLE-GRAY);
      font-family: var(--font-medium);
      background: var(--WHITE);
      // padding: 0 5px;
      letter-spacing: 0;
    }
  }
  .mdc-text-field .mdc-floating-label {
    position: absolute;
    box-sizing: content-box;
    top: 28px;
    overflow: hidden;
    pointer-events: none !important;
    z-index: 2;
  }
  .mat-mdc-form-field-subscript-wrapper {
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .mat-mdc-form-field-hint-wrapper {
    padding: 0;
    padding-right: 3px;
    top: -5px;
  }
  mat-hint {
    display: block;
    color: var(--GRAY-SOFT);
    font-size: 9px;
    font-family: var(--font-medium);
    line-height: 1;
  }
  .mdc-line-ripple {
    display: none;
  }

  .mat-mdc-form-field-bottom-align::before {
    content: none;
  }

  // outline calendar
  .mdc-text-field--outlined {
    outline: none;
    --mat-form-field-outlined-outline-width: 0px;
    --mat-form-field-outlined-focus-outline-width: 0px;
    --mat-form-field-outlined-container-shape: 0px;
  }
}

// отступ от края, если есть больше одной иконки
.sln-field-layout:has(.sln-core-field-number-p-info) {
  .mat-mdc-form-field-input-control {
    padding: 0 50px 0 10px !important;
  }
}

// уменьшение input sln-input-xs
.mat-mdc-form-field:has(.mat-mdc-form-field-input-control.sln-input-xs) {
  .mdc-floating-label {
    top: 11px;
    font-size: 13px;
  }
  .mdc-text-field--filled .mdc-floating-label--float-above {
    transform: translateY(-18px) scale(0.75);
  }
}
// sln-input-s
.mat-mdc-form-field:has(.mat-mdc-form-field-input-control.sln-input-s) {
  .mdc-floating-label {
    top: 20px;
    font-size: 13px;
  }
  .mdc-text-field--filled .mdc-floating-label--float-above {
    transform: translateY(-22px) scale(0.85);
  }
}

.mat-mdc-radio-touch-target {
  width: 20px !important;
  height: 20px !important;
}
.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control {
  width: 20px !important;
  height: 20px !important;
}
.mat-mdc-radio-button
  .mdc-radio
  .mdc-radio__native-control:enabled:not(:checked)
  + .mdc-radio__background
  .mdc-radio__outer-circle {
  color: var(--PRIMARY);
}
.mat-mdc-radio-button
  .mdc-radio
  .mdc-radio__native-control:enabled
  + .mdc-radio__background
  .mdc-radio__inner-circle {
  color: var(--WHITE);
}
.mdc-text-field__input {
  margin-bottom: 0;
}

// combobox mat-select
.sln-core-field-combobox {
  mat-select {
    border: 1.4px solid var(--GRAY);
    min-height: 45px;
    padding: 10px 10px 6px 10px;
    color: var(--MIDLE-GRAY);
    font-size: 14px;
    background-color: var(--WHITE);
    font-family: var(--font-medium);
    .mat-select-custom-placeholder {
      font-family: var(--font-medium);
    }
    .mat-mdc-select-trigger {
      max-height: 100px;
      overflow-y: auto;
      overflow-x: hidden;
      justify-content: space-between;
    }
  }
  .mat-mdc-select-value {
    width: 94%;
    max-height: 100px;
    overflow-y: auto;
  }
  .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
    transform: translate(0, 0px);
    align-items: baseline;
  }
  .mat-mdc-select-arrow {
    color: var(--DARK-GREY);
    top: 8px;
    right: 0px;
    transform: none !important;
  }
  .mat-mdc-select-placeholder {
    padding-right: 10px;
  }

  // для других модулей
  .multiple-combobox-with-btn:has(.sln-input-s) {
    .mat-mdc-select-trigger {
      top: 5px;
    }
  }
  .multiple-combobox-with-btn {
    .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
      transform: translate(0px, 0px);
      align-items: baseline;
    }
    .sln-core-field-combobox .mat-mdc-select-value {
      width: 94%;
    }
    .sln-position-close {
      right: 30px !important;
      top: 12px !important;
      .sln-common-cross-table {
        background-size: 10px;
      }
    }
  }
}

.mat-form-field-required-marker {
  color: var(--DANGER);
}

.sln-column-filter-template:has(.sln-column-filter-template-btn) {
  .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
    transform: translate(-45px, -8px);
  }
}
.sln-column-filter-template:has(.sln-column-filter-template-btn) {
  .sln-input-s {
    .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
      transform: translate(-30px, -8px);
    }
  }
}
// textarea
.sln-textarea {
  margin-bottom: 5px !important;
}

// всплывающие окна
.mat-mdc-menu-content {
  background: var(--WHITE);
}
.mat-mdc-select-panel {
  background: var(--WHITE) !important;
}
.mat-mdc-menu-panel {
  background: var(--WHITE) !important;
  max-width: 285px !important;
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input {
  box-shadow: inset 0px 27px 0px 20px white;
}

// combobox mat-select в placeholder="Тип факторинга"
.sln-draft-product {
  .mat-mdc-select-trigger {
    display: inline;
  }
  .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
    transform: translateY(-14px);
    position: absolute;
    right: -1.8px;
  }
  .sln-core-field-combobox .mat-mdc-select-arrow {
    position: static;
  }
  .mat-mdc-select-arrow-wrapper {
    height: auto;
  }
}
.sln-draft-financeSum {
  .sln-core-field-number-p-info {
    right: 9px !important;
    align-items: normal !important;
  }
}

// mat-timepicker
.mat-timepicker-content-layout-values {
  .mat-mdc-form-field:not(.mat-form-field-no-animations)
    .mdc-text-field__input {
    box-shadow: none;
  }
}
.mat-timepicker-content-layout-values
  .mat-mdc-form-field:not(.mat-form-field-no-animations)
  .mdc-text-field__input {
  font-size: 30px;
  color: var(--DARK-GREY);
  padding: 0;
  text-align: center;
}
.mat-timepicker-content-layout-values {
  .mat-mdc-form-field mat-hint {
    font-size: 13px;
  }
  .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper {
    display: block;
    text-align: center;
  }
  .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper {
    padding-right: 0;
    top: 2px;
  }
}

.mdc-list-item__primary-text {
  > div {
    height: auto !important;
    font-family: var(--font-medium);
    color: var(--DARK-GREY);
    .small {
      color: var(--MIDLE-GRAY) !important;
      letter-spacing: 0.01em;
    }
  }
}
.mat-mdc-option.mdc-list-item {
  padding: 15px;
  border-bottom: 1px solid var(--LIGHT-GRAY);
  &:last-child {
    border-bottom: none;
  }
  .mdc-list-item__primary-text {
    span {
      font-family: var(--font-medium);
      color: var(--DARK-GREY);
    }
  }
}
// menuitem .mat-mdc-menu-item
.sln-role-block-btn {
  min-height: 40px !important;
  .sln-role-menu-content {
    padding: 0 !important;
  }
  .mat-mdc-menu-item-text {
    color: var(--MIDLE-GRAY);
  }
  &.active {
    border-left: 2px solid var(--PRIMARY);
    .mat-mdc-menu-item-text {
      color: var(--PRIMARY);
    }
  }
}

// новый класс (cmpClass)
.mat-mdc-form-field.inline-edit-mode {
  &:focus-within .mat-mdc-form-field-input-control {
    border: none;
    border-bottom: 2px solid var(--PRIMARY);
    border-radius: 0;
  }
}

// mat-expansion-indicator, стрелка
.mat-expansion-indicator svg {
  fill: var(--MIDLE-GRAY) !important;
}

.mdc-text-field--no-label .mat-mdc-form-field-infix {
  padding: 5px 0 !important;
}
