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

@mixin page-menu-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $accent: mat.get-color-from-palette(map.get($color-config, accent));

  .page-menu {
    .mdc-tab:not(.mdc-tab--active):hover {
      .mdc-tab__text-label {
        color: $accent;
        transition: none;
      }

      .mdc-tab-indicator__content--underline {
        border-color: $accent;
        opacity: 1;
      }
    }
  }
}

.page-menu {
  .mat-mdc-tab-header,
  .mat-mdc-tab-body.mat-mdc-tab-body-active,
  .mat-mdc-tab-body-wrapper,
  .mat-mdc-tab-body-content {
    overflow: initial;
  }

  .mat-mdc-tab-header {
    --mdc-secondary-navigation-tab-container-height: 34px !important;
    --mat-tab-header-active-ripple-color: transparent;
    --mat-tab-header-inactive-ripple-color: transparent;
    margin-bottom: 20px;
  }

  .mdc-tab__text-label {
    @include typography.text-sm;
    font-weight: map.get(typography.$font-weights, 'semibold');
  }

  .mdc-tab {
    &:first-of-type .mdc-tab-indicator__content--underline {
      border-bottom-left-radius: 8px 2px;
    }

    &:last-of-type .mdc-tab-indicator__content--underline {
      border-bottom-right-radius: 8px 2px;
    }
  }

  .mat-mdc-tab-label-container {
    border-radius: 10px;
    border: 1px solid #e7e7e7;
    padding: 22px 32px;
    box-shadow: 10px 20px 40px 0 rgba(0, 0, 0, 0.05);
  }
}