@use '../../global/scss/tools' as nsw;

.nsw-tabs {
  @include nsw.component-spacing();

  &__list-wrapper {
    overflow: hidden;
    height: nsw.rem(48px);
    background-color: var(--nsw-off-white);

    .nsw-section--invert & {    
      background-color: rgba(var(--nsw-white-rgb), 0.15);
    }

    @include nsw.breakpoint('md') {
      background-color: transparent;

      .nsw-section--invert & {    
        background-color: transparent;
      }
    }
  }

  &__list {
    margin: 0;
    padding: 0 0 nsw.rem(20px) 0;
    list-style: none;
    display: flex;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;

    li {
      margin: 0;
    }

    a {
      @include nsw.z-index;
      display: block;
      padding: nsw.rem(12px) nsw.rem(16px);
      position: relative;
      text-decoration: none;
      color: var(--nsw-brand-dark);
      height: 100%;

      &:hover {
        @include nsw.nsw-hover;
        outline-width: 0;
      }

      &:focus {
        outline-width: 3px;
        outline-offset: -3px;

        .nsw-section--invert & {    
          outline-color: var(--nsw-text-light);
        }
      }

      &.active {
        color: var(--nsw-text-dark);

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          border-bottom: solid 2px var(--nsw-brand-accent);
        }
      
        .nsw-section--invert & {    
          color: var(--nsw-text-light);
        }
      }
      
      .nsw-section--invert & {    
        color: var(--nsw-text-light);
      }
    }
  }

  &__content {
    padding: nsw.rem(24px) nsw.rem(16px);
    border-bottom: solid 1px var(--nsw-grey-04);
    border-top: solid 2px var(--nsw-grey-04);
    margin-top: -2px;

    &:focus {
      @include nsw.nsw-focus;

      .nsw-section--invert & {    
        outline-color: var(--nsw-white);
      }
    }

    &--flush {
      padding: 0;
    }

    &--side-flush {
      padding-left: 0;
      padding-right: 0;
    }

    &--no-border {
      border-bottom: 0;
    }
  }
}