/*
 * Copyright (C) 2024-2025 BIRU
 *
 * This file is part of Tenzu.
 *
 * Tenzu is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 *
 * You can contact BIRU at ask@biru.sh
 *
 */

@use "@angular/material" as mat;

.mat-mdc-form-field {
  @apply w-full;
  .mdc-text-field {
    padding: 0 12px;
  }
  .mdc-text-field--outlined:not(:has(.mat-mdc-select)) {
    box-shadow: 0 0 3px var(--mat-sys-primary);;
    border-bottom-left-radius: var(--mat-sys-corner-medium);
    border-bottom-right-radius: var(--mat-sys-corner-medium);
  }

  &.mat-form-field-disabled {
    .mdc-text-field--outlined {
      box-shadow: none;
    }
  }

  .mat-form-field-appearance-outline {
    margin-top: 6.75px;
  }

  .mat-mdc-form-field-infix {
    @apply w-full;
    textarea {
      min-width: 480px;
    }
  }

  .mat-mdc-form-field-hint-wrapper,
  .mat-mdc-form-field-error-wrapper {
    position: relative;
  }

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

  &.mat-form-field-invalid {
    .mdc-text-field--outlined {
      box-shadow: 0 0 3px var(--mat-sys-error);
    }
  }

  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    .mdc-line-ripple::before, .mdc-line-ripple::after {
      margin-bottom: 3px;
    }
  }

  &:hover, &:focus-within {
    .mdc-text-field--filled:not(.mdc-text-field--disabled) {
      .mdc-line-ripple::before {
        box-shadow: 0 0 3px var(--mat-sys-primary);
      }
    }
  }
}
form .mat-mdc-form-field-error {
  color: var(--mat-sys-on-error-container);
}

.mat-mdc-slide-toggle > .mat-internal-form-field > label {
  padding-left: 8px;
}

@mixin tokens-overrides() {
  @include mat.form-field-overrides((
      outlined-outline-color: var(--mat-sys-primary),
      outlined-hover-outline-color: var(--mat-sys-on-primary),
      outlined-focus-outline-color: var(--mat-sys-primary),
      outlined-error-outline-color: var(--mat-sys-error),
      outlined-error-hover-outline-color: var(--mat-sys-on-error),
      outlined-error-focus-outline-color: var(--mat-sys-error),
      container-text-size: var(--mat-sys-label-large-size),
      container-text-line-height: var(--mat-sys-label-large-line-height),
      container-height: 36px,
      container-vertical-padding: 8px,
      filled-container-color: transparent,
      outlined-container-shape: var(--mat-sys-corner-medium),
      filled-container-shape: var(--mat-sys-corner-medium),
      filled-input-text-color: var(--mat-sys-on-surface),
      outlined-input-text-color: var(--mat-sys-on-surface),
      outlined-label-text-size: var(--mat-sys-label-large-size),
      filled-label-text-size: var(--mat-sys-label-large-line-height),
      outlined-label-text-color: var(--mat-sys-on-background),
      filled-label-text-color: var(--mat-sys-on-container),
      outlined-focus-label-text-color: var(--mat-sys-on-primary-container),
      filled-focus-label-text-color: var(--mat-sys-on-primary-container),
      outlined-hover-label-text-color: var(--mat-sys-on-primary-container),
      filled-hover-label-text-color: var(--mat-sys-on-primary-container),
      outlined-error-hover-label-text-color: var(--mat-sys-on-error-container),
      filled-error-hover-label-text-color: var(--mat-sys-on-error-container),
      outlined-error-focus-label-text-color: var(--mat-sys-on-error-container),
      filled-error-focus-label-text-color: var(--mat-sys-on-error-container),
      outlined-error-label-text-color: var(--mat-sys-on-error-container),
      filled-error-label-text-color: var(--mat-sys-on-error-container),
      filled-with-label-container-padding-top: 16px,
      filled-with-label-container-padding-bottom: 4px,
      hover-state-layer-opacity: 0,
      focus-state-layer-opacity: 0,
      filled-active-indicator-color: var(--mat-sys-outline),
      filled-hover-active-indicator-color: var(--mat-sys-primary),
      filled-focus-active-indicator-color: var(--mat-sys-primary),
      filled-error-active-indicator-color: var(--mat-sys-error-container),
      filled-error-focus-active-indicator-color: var(--mat-sys-error),
      filled-error-hover-active-indicator-color: var(--mat-sys-error),
    ));

  .mdc-text-field--outlined:has(.mat-mdc-select) {
    @include mat.form-field-overrides((
      outlined-outline-width: 1px,
      outlined-focus-outline-width: 1px,
    ));
  }
  .no-outlined {
    .mdc-text-field--outlined:has(.mat-mdc-select) {
      @include mat.form-field-overrides((
              outlined-outline-width: 0px,
              outlined-focus-outline-width: 0px,
      ));

    }
  }


  .mat-mdc-form-field.title-field {
    @include mat.form-field-overrides(
    (
      container-text-size: var(--mat-sys-headline-small-size),
      container-text-line-height: var(--mat-sys-headline-small-line-height),
      container-text-weight: var(--mat-sys-headline-small-weight),
      container-text-tracking: 0px,
      outlined-input-text-color: var(--mat-sys-on-background),
      filled-input-text-color: var(--mat-sys-on-background),
      container-vertical-padding: 0px
    )
    );

    .mat-mdc-form-field-flex {
      padding-bottom: 8px;
    }
  }


  .mat-mdc-form-field.transparent {
    @apply w-fit;
    @include mat.form-field-overrides((
      outlined-outline-color: transparent,
      outlined-hover-outline-color: transparent,
      outlined-focus-outline-color: transparent,
      container-vertical-padding: 0,
      container-height: 24px,
    ));
    .mdc-text-field--outlined {
      box-shadow: none;

    }
    .mat-mdc-form-field-infix {
      min-width: 48px;
      line-height: 0;
    }
  }
}

