@use '~@angular/material' as mat;


@mixin form-field-theme($theme, $typo: null, $swap: false) {
  $input-height: 2rem !default;
  $input-padding: 0.4rem !default;

  $config: mat.get-color-config($theme);

  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  @if ($swap) {
    $primary: map-get($config, accent);
    $ascent: map-get($config, primary);
    $warn: map-get($config, warn);
  }


  ql-field.invalid > div.input {
    border: .1rem solid mat.get-color-from-palette($warn, 700, 0.7);

    &:focus-within {
      border: .1rem solid mat.get-color-from-palette($warn, 700, 0.7);
      box-shadow: 0 0 .15rem .02rem mat.get-color-from-palette($warn, 300, 1);
    }
  }
;

  ql-field > div.input {
    transition-property: border, box-shadow;
    transition-duration: 250ms;
    transition-timing-function: linear;

    display: inline-flex;
    position: relative;
    height: $input-height;
    padding: $input-padding;
    width: inherit;
    background-color: whitesmoke;
    border: .1rem solid mat.get-color-from-palette($primary, 700, 0.4);
    outline: none;
    border-radius: .2rem;

    mat-datepicker-toggle {
      display: flex;
      flex-flow: row;
      justify-content: center;
      align-items: center;

      button {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
      }
    }

    &:hover {
      border: .1rem solid mat.get-color-from-palette($primary, 700, 0.7);
    }

    &:focus-within {
      border: .1rem solid mat.get-color-from-palette($primary, 700, 0.7);
      box-shadow: 0 0 .15rem .02rem mat.get-color-from-palette($primary, 300, 1);
    }

    & > input {
      padding: 0;
      border: none;
      outline: none;
      background-color: transparent;
      box-sizing: border-box;
      margin: 0;
      color: mat.get-color-from-palette($primary, 700, 1);
      width: 100%;

      @if ($typo) {
        @include mat.typography-level($typo, body-1);
      }
    }
  }
  ql-field > div.label {
    color: mat.get-color-from-palette($ascent, 700);
    @if ($typo) {
      @include mat.typography-level($typo, body-1);
    }
  }
  ql-field > div.error {
    transition-property: width;
    transition-duration: 350ms;
    transition-timing-function: linear;
    @if ($typo) {
      @include mat.typography-level($typo, body-2);
    }
    width: 0;
    transform: translateX(-100%);
    opacity: 0;
    color: mat.get-color-from-palette($warn, 700);
  }

  mat-select {

    .mat-select-trigger {
      width: 100%;
      height: 100%;

      .mat-select-value {
        @if ($typo) {
          @include mat.typography-level($typo, body-2);
        }
      }
    }
  }

  .mat-option-text {
    @if ($typo) {
      @include mat.typography-level($typo, body-2);
    }
  }

}