//-----------------------------
// Tabs
//-----------------------------

@import '../../globals/scss/vars';
@import '../../globals/scss/colors';
@import '../../globals/scss/spacing';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/layer';
@import '../../globals/scss/typography';
@import '../../globals/scss/layout';
@import '../../globals/scss/import-once';
@import '../../globals/scss/css--typography';

@include exports('tabs') {
  .#{$prefix}--tabs {
    @include typescale('zeta');
    @include font-smoothing;
    @include font-family;
    color: $text-01;
    font-weight: 600;
    height: auto;
    width: 100%;
    position: relative;

    @include breakpoint(bp--sm--major) {
      background: none;
      min-height: rem(49px);
    }
  }

  .#{$prefix}--tabs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $spacing-md;
    height: rem(40px);
    cursor: pointer;
    background-color: $field-01;

    svg {
      width: rem(12px);
      height: rem(12px);
      fill: $brand-01;
    }

    &:focus {
      @include focus-outline('border');
    }

    @include breakpoint(bp--sm--major) {
      display: none;
    }
  }

  .#{$prefix}--tabs-trigger-text {
    text-decoration: none;
    font-weight: 600;
    color: $text-01;

    &:focus {
      @include focus-outline('border');
    }
  }

  .#{$prefix}--tabs__nav {
    @include layer('overlay');
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;

    @include breakpoint(bp--sm--major) {
      @include typescale('epsilon');
      flex-direction: row;
      margin-right: $spacing-md;
      margin-left: $spacing-md;
      background: none;
      box-shadow: none;
    }

    @include breakpoint(bp--lg--major) {
      margin-left: 0;
    }
  }

  .#{$prefix}--tabs__nav--hidden {
    display: none;

    @include breakpoint(bp--sm--major) {
      display: flex;
    }
  }

  .#{$prefix}--tabs__nav-item {
    @include typescale('zeta');
    background-color: $ui-01;
    padding: 0;
    cursor: pointer;

    &:hover,
    &:focus {
      background-color: $brand-01;

      @include breakpoint(bp--sm--major) {
        outline: 1px solid transparent;
        background: transparent;
      }
    }

    @include breakpoint(bp--sm--major) {
      background: transparent;
      padding: $spacing-sm 0 $spacing-sm;

      & + & {
        margin-left: rem(48px);
      }
    }
  }

  .#{$prefix}--tabs__nav-item--selected {
    border: none;

    @include breakpoint(bp--sm--major) {
      border-bottom: 2px solid $brand-01;

      .#{$prefix}--tabs__nav-link {
        color: $brand-01;

        &:focus {
          color: $brand-01;
        }
      }
    }
  }

  .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
    color: $inverse-01;

    @include breakpoint(bp--sm--major) {
      color: $brand-01;
    }
  }

  .#{$prefix}--tabs__nav-link {
    display: inline-block;
    color: $text-01;
    text-decoration: none;
    padding: $spacing-md;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:focus {
      outline: 1px solid transparent;
      background-color: $brand-01;
      color: $inverse-01;
    }

    @include breakpoint(bp--sm--major) {
      padding: 0 $spacing-3xs;
      width: auto;

      &:hover {
        color: $brand-01;
      }

      &:focus {
        background-color: transparent;
        color: $text-01;
        outline: 1px solid transparent;
        box-shadow: 0 0 0 1px $brand-01;
      }
    }
  }
}