@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/typography';
@import '~@kaizen/design-tokens/sass/color';
@import '../mixins';

@layer kz-components {
  .container {
    display: flex;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .linkAnchor {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 $spacing-sm;
    position: relative;
    color: rgba($color-white-rgb, 0.7);
    font-family: $typography-heading-4-font-family;
    font-weight: $typography-heading-4-font-weight;
    font-size: $typography-heading-4-font-size;
    line-height: $typography-heading-4-line-height;
    letter-spacing: $typography-heading-4-letter-spacing;
    text-decoration: none;
    white-space: nowrap;
    margin-inline-end: $spacing-md;

    &:hover {
      color: $color-white;
      text-decoration: none;
    }

    @include title-block-under-1366 {
      font-family: $typography-heading-5-font-family;
      font-weight: $typography-heading-5-font-weight;
      font-size: $typography-heading-5-font-size;
      line-height: $typography-heading-5-line-height;
      letter-spacing: $typography-heading-5-letter-spacing;
    }

    @include title-block-under-1440 {
      margin-inline-end: $spacing-xs;
    }

    @media (max-width: 1189px) {
      margin: 0;
    }

    $active-tab-marker-height: 5px;

    &.active,
    &:focus {
      color: $color-white;

      &::before {
        content: '';
        display: block;
        height: $active-tab-marker-height;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: $color-white;
        transition: transform cubic-bezier(0.55, 0.085, 0.68, 0.53) 150ms;
        border-radius: 0 0 $border-solid-border-radius $border-solid-border-radius;

        @include title-block-medium-and-small {
          top: auto;
          bottom: 0;
          border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
        }
      }
    }

    &:focus {
      outline: none;

      &::before {
        background-color: $color-blue-200;
      }

      &::after {
        $focus-ring-offset: calc((-1 * #{$border-focus-ring-border-width}));

        content: '';
        position: absolute;
        background: transparent;
        border-color: $color-blue-200;
        border-radius: 0 0 $border-focus-ring-border-radius $border-focus-ring-border-radius;
        border-width: $border-focus-ring-border-width;
        border-style: $border-focus-ring-border-style;
        inset: 0 $focus-ring-offset $active-tab-marker-height;

        @include title-block-medium-and-small {
          border-radius: $border-focus-ring-border-radius $border-focus-ring-border-radius 0 0;
          inset: $active-tab-marker-height $focus-ring-offset 0 $focus-ring-offset;
        }
      }
    }

    @media (forced-colors: active) {
      &.active,
      &:focus {
        &::before {
          background: transparent;
          // instead of height we're using the border to create a active tab mark to make it friendlier for Windows High Contrast Mode.
          border: $active-tab-marker-height solid transparent;
          height: 0;
        }
      }
    }
  }

  .linkAnchor.lightBackground {
    color: rgba($color-purple-800-rgb, 0.75);

    &:hover {
      color: $color-blue-500;
    }

    &.active {
      color: $color-blue-500;

      &::before {
        background-color: $color-blue-500;

        @include title-block-medium-and-small {
          top: auto;
          bottom: 0;
          border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
        }
      }
    }
  }
}