@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';
@use '../../../mx-core/src/base/typography';

@mixin mx-tabs-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  $primary-bg-hover: rgba(map.get($color-theme, primary), opacity.$opacity-8);
  $primary-bg-active: rgba(map.get($color-theme, primary), opacity.$opacity-12);
  $secondary-bg-hover: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
  $secondary-bg-active: rgba(map.get($color-theme, onSurface), opacity.$opacity-12);
  $disabled: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);

  .mx-tabs {
    .mat-mdc-tab {
      color: map.get($color-theme, onSurface);

      &.mat-mdc-tab-disabled {
        color: $disabled;
      }

      &:hover {
        background-color: $secondary-bg-hover;
      }
      &:active {
        background-color: $secondary-bg-active;
      }

      &__text-label {
        color: inherit;
      }

      &-label-container {
        border-bottom: 1px solid map.get($color-theme, surfaceContainerHighest);
      }

      &-header-pagination {
        .mat-mdc-tab-header-pagination-chevron {
          color: map.get($color-theme, onSurfaceVariant);
        }
        &:hover {
          background-color: $secondary-bg-hover;
        }
        &:active {
          background-color: $secondary-bg-active;
        }
      }
    }

    .mdc-tab-indicator {
      &__content--underline {
        background-color: map.get($color-theme, primary);
      }
    }

    &.mx-tabs-primary {
      .mdc-tab {
        &.mdc-tab--active {
          .mdc-tab__text-label {
            color: map.get($color-theme, primary);
          }
          &:hover {
            background-color: $primary-bg-hover;
          }
          &:active {
            background-color: $primary-bg-active;
          }
        }
      }
    }
  }
}

.mx-tabs {
  .mdc-tab {
    &__text-label {
      @extend .gl-title-sm;
    }
  }

  .mat-mdc-tab-body {
    padding: 16px;
  }

  &.mx-tabs-primary {
    .mdc-tab-indicator {
      &__content--underline {
        border: none;
        height: 3px;
        border-radius: 3px 3px 0px 0px;
      }
    }
  }

  &.mx-tabs-secondary {
    .mdc-tab-indicator {
      &__content--underline {
        border: none;
        height: 2px;
        border-radius: 0;
      }
    }
  }
}