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

@mixin tab-wrapper-theme($activePalette, $foreground, $is-dark) {
  $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  .mtna-tab-wrapper-appearance-fill {
    // opacity values reflect those found in mat-form-field-fill theme
    // see https://github.com/angular/components/blob/master/src/material/form-field/_form-field-fill-theme.scss
    .mat-tab-header {
      // reflects the $fill-background value
      background-color: mat.get-color-from-palette($foreground, base, if($is-dark, 0.1, 0.04));
    }
  }
  .mtna-tab-wrapper-appearance-outline {
    // opacity values reflect those found in mat-form-field-outline theme
    // see https://github.com/angular/components/blob/master/src/material/form-field/_form-field-outline-theme.scss
    .mat-tab-group .mat-tab-header {
      // reflects the inactive $outline-color value in mat-form-field theme
      border-color: mat.get-color-from-palette($foreground, divider, if($is-dark, 0.3, 0.12));
    }
    &:hover .mat-tab-group .mat-tab-header {
      // reflects the $outline-color-hover value in mat-form-field theme
      border-color: mat.get-color-from-palette($foreground, divider, if($is-dark, 1, 0.87));
      transition: border-color 600ms $swift-ease-out-timing-function;
    }
    &.active .mat-tab-group .mat-tab-header {
      // reflects the outline of focused mat-form-field
      border-color: mat.get-color-from-palette($activePalette);
      transition: border-color 100ms $swift-ease-out-timing-function;
    }
  }
}

@mixin select-wrapper-theme($activePalette, $foreground, $is-dark) {
  .mtna-select-wrapper-appearance-outline {
    .mtna-select-wrapper-container:hover {
      .mat-form-field {
        .mat-form-field-outline {
          opacity: 0;
          // transition based off that used in mat-form-field-outline scss
          // see https://github.com/angular/components/blob/master/src/material/form-field/form-field-outline.scss
          transition: opacity 600ms cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .mat-form-field-outline-thick {
          opacity: 1;
        }
      }
    }
  }
}