@use 'sass:map';
@use '~@angular/material' as mat;

@mixin color($theme) {
  $config: mat.get-color-config($theme);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);

  .mtna-highlight {
    &:not(.mat-form-field) {
      position: relative;
      &.mtna-highlight-primary {
        @include mtna-highlight-outline($primary);
      }
      &.mtna-highlight-accent {
        @include mtna-highlight-outline($accent);
      }
    }
    &.mat-form-field {
      &.mtna-highlight-primary {
        @include mtna-highlight-form-field($primary);
      }
      &.mtna-highlight-accent {
        @include mtna-highlight-form-field($accent);
      }
    }
  }
}

@mixin typography($theme) {
}

@mixin theme($theme) {
  $config: mat.get-color-config($theme);
  @if $config != null {
    @include color($theme);
  }

  $typography-config: mat.get-typography-config($theme);
  @if $typography-config != null {
    @include typography($theme);
  }
}

/** Use mat-form-field's internal properties to trigger highlight */
@mixin mtna-highlight-form-field($color) {
  $simple_standard: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  // Highlight styles for mat-form-field with 'appearance=outline'
  &[appearance='outline'] .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline.mat-form-field-outline-thick {
    transition: opacity $simple_standard;
    border-radius: 4px;
    box-shadow: 0 0 2pt 0 mat.get-color-from-palette($color, 0.87);
    color: mat.get-color-from-palette($color, 0.87);
    opacity: 1;
  }
}

@mixin mtna-highlight-outline($color) {
  &::after {
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: fadeIn;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    border: 2px solid mat.get-color-from-palette($color, 0.87);
    bottom: -4px;
    box-shadow: 0 0 2pt 0 mat.get-color-from-palette($color, 0.87);
    content: '';
    left: -4px;
    position: absolute;
    right: -4px;
    top: -4px;
    z-index: 1;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}