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

// Header mixin
// Use theme to manage colors on header
@mixin mic-header-override($theme) {
  $primary: map.get($theme, primary);
  $primaryBackgroundColor: map.get($primary, A400);
  $borderColor: map.get(colors.$mic-grey, 200);
  $is-dark: map.get($theme, is-dark);

  @if $is-dark {
    $primaryBackgroundColor: map.get(colors.$mic-grey, 600);
    $borderColor: map.get(colors.$mic-grey, 700);
  }

  a.bypass:focus {
    color: colors.$mic-text-colors-normal-light;
    background: $primaryBackgroundColor;
    text-decoration: underline;
  }
  a.bypass.white:focus {
    color: map.get($primary, A400);
    background: map.get(colors.$mic-grey, A100);
    @if $is-dark {
      color: colors.$mic-text-colors-normal-light;
      background: map.get(colors.$mic-grey, 700);
    }
  }
}
