@use '@angular/material' as mat;

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .external-link-icon {
    font-size: 0.75rem;
  }

  @include mat.tabs-overrides(
    (
      active-indicator-height: 0,
      divider-height: 0,
      label-text-tracking: normal
    )
  );

  ::ng-deep {
    .mat-mdc-tab-nav-panel {
      padding: 2rem 0;

      @media (max-width: 575.98px) {
        padding: 1rem 0;
      }
    }
  }

  @media (max-width: 575.98px) {
    @include mat.tabs-overrides(
      (
        container-height: 3rem
      )
    );
  }

  @media (min-width: 576px) {
    flex-direction: row-reverse;

    @include mat.tabs-overrides(
      (
        active-focus-label-text-color: rgba(var(--palette-foreground-base), 1),
        active-hover-label-text-color: rgba(var(--palette-foreground-base), 1),
        active-label-text-color: rgba(var(--palette-foreground-base), 1),
        active-ripple-color: rgba(var(--palette-foreground-base), 1),
        container-height: 2rem,
        inactive-ripple-color: rgba(var(--palette-foreground-base), 1)
      )
    );

    ::ng-deep {
      .mat-mdc-tab-header {
        background-color: rgba(var(--palette-foreground-base), 0.02);
        padding: 2rem 0;
        width: 14rem;

        .mat-mdc-tab-links {
          flex-direction: column;

          .mat-mdc-tab-link {
            border-radius: 0.25rem;
            font-weight: 400;
            justify-content: flex-start;
            margin: 0 0.5rem 0.1rem 0.5rem;

            &.mdc-tab--active {
              background-color: rgba(var(--palette-foreground-base), 0.05);
              font-weight: 500;
            }

            .mdc-tab__content,
            .mdc-tab__text-label {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

:host-context(.theme-dark) {
  @media (min-width: 576px) {
    @include mat.tabs-overrides(
      (
        active-focus-label-text-color: rgba(
            var(--palette-foreground-base-dark),
            1
          ),
        active-hover-label-text-color: rgba(
            var(--palette-foreground-base-dark),
            1
          ),
        active-label-text-color: rgba(var(--palette-foreground-base-dark), 1),
        active-ripple-color: rgba(var(--palette-foreground-base-dark), 1),
        inactive-ripple-color: rgba(var(--palette-foreground-base-dark), 1)
      )
    );

    ::ng-deep {
      .mat-mdc-tab-header {
        background-color: rgba(var(--palette-foreground-base-dark), 0.02);

        .mat-mdc-tab-link {
          &.mdc-tab--active {
            background-color: rgba(var(--palette-foreground-base-dark), 0.05);
          }
        }
      }
    }
  }
}