@use '@angular/material' as mat;
@import '../variables';

@mixin mw-mat-tab-override($theme) {
  $is-dark-theme: map-get($theme, is-dark);

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

  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  --mw-tab-base: if($is-dark-theme, white, var(--graphite500));
  --mw-tab-background: if($is-dark-theme, var(--graphite500), white);
  --mw-tab-hover-background: #{rgba(var(--mw-tab-base), 0.04)};
  --mw-tab-pressed-background: #{rgba(var(--mw-tab-base), 0.1)};

  .mw-dark-theme {
    --mw-tab-background: var(--graphite500);
    --mw-tab-base: white;
  }

  .mw-light-theme {
    --mw-tab-background: white;
    --mw-tab-base: var(--graphite500);
  }

  .mat-tab-header {
    height: 40px;
    background-color: var(--mw-tab-background);
    overflow: initial;
  }

  .mat-ink-bar {
    background-color: mat.get-color-from-palette($accent) !important;
  }

  .mat-tab-label {
    color: var(--mw-secondary-text);
    opacity: 1;
    min-width: 89px;
    padding: 0 16px;
    height: 40px;
    @include mw-typography(caption);

    &-active {
      color: var(--mw-text);
      font-weight: 500;
      .mat-icon {
        color: mat.get-color-from-palette($accent);
      }
    }
    .mat-ripple-element {
      background-color: var(--mw-tab-pressed-background);
    }

    &:hover:not(.mat-tab-disabled) {
      color: var(--mw-text);
      background-color: var(--mw-tab-hover-background);
    }

    .mat-icon {
      margin-right: 8px;
      font-size: 18px;
      height: 18px;
      width: 18px;
    }
  }

  .mat-tab-disabled {
    color: var(--mw-disabled-text) !important;
  }

  .mat-tab-label-container {
    height: 40px;
  }
}