// ==========================================================================
// Tab variables
// ==========================================================================

$luci-tab-box-shadow: 0 1px 5px 0 rgba($luci-color-black, .25);
$luci-tab-background-color-light: $luci-color-neutral-85;
$luci-tab-background-color-dark: $luci-background-color-medium-blue;


.luci-tab__nav {
  background: $luci-background-color-white;
  border-bottom: $luci-border-component-on-light;
  padding-top: $luci-space-md;
  position: relative;

  &::after {
    bottom: 3px;
    box-shadow: $luci-tab-box-shadow;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: $luci-z-index-low;
  }

  .luci-tab--on-light & {
    background: $luci-tab-background-color-light;
  }

  .luci-tab--on-dark & {
    background: $luci-tab-background-color-dark;
  }
}

.luci-tab__list {
  @include luci-box-sizing();
  @include luci-font-reset();
  @include luci-text-color-with-container-modifiers();
  display: flex;
  font-size: $luci-font-size-md;
  list-style: none;
  margin: 0 auto;
  max-width: $luci-grid-container-xl;
  padding: 0;
}

.luci-tab__list-item {
  border: 1px solid transparent;
  border-top-left-radius: $luci-border-radius-default;
  border-top-right-radius: $luci-border-radius-default;
  flex: 0 0 auto;
  margin-right: 2px;
  padding: $luci-space-sm $luci-space-lg;
  position: relative;
  top: 1px;

  &:last-child {
    margin-right: 0;
  }

  .luci-link {
    font-weight: $luci-font-weight-semi-bold;

    &:hover {
      color: $luci-text-color-selected-on-light;
    }

    .luci-tab--on-dark & {
      color: $luci-text-color-primary-on-dark;
    }

    // sass-lint:disable force-element-nesting
    .luci-tab--on-dark .luci-tab__list--nested & {
      color: $luci-link-color-default-on-light;
    }
    // sass-lint:enable force-element-nesting

  }

  .luci-tab--on-light & {
    background: $luci-background-color-white;
  }

  &.luci-tab__list-item--is-active {
    background: $luci-background-color-white;
    border: $luci-border-component-on-light;
    border-bottom: 0;
    border-top-left-radius: $luci-border-radius-default;
    border-top-right-radius: $luci-border-radius-default;
    // box-shadow: $luci-box-shadow-focus;
    z-index: $luci-z-index-molehill;

    .luci-link {
      color: $luci-text-color-selected-on-light;
      display: block;
      position: relative;
      top: -1px;
    }

    .luci-tab__list--nested & {
      background: transparent;
      border: 0;
      position: relative;

      .luci-link {
        border-bottom: 4px solid $luci-link-color-active-on-light;
        padding: $luci-space-stack-xxs;
      }
    }
  }

  .luci-tab--with-icons & {
    align-items: center;
    display: inline-flex;
  }
}

.luci-tab__content {
  @include luci-box-sizing();
  @include luci-font-reset();
  @include luci-text-color-with-container-modifiers();
  font-size: $luci-font-size-md;
  padding-top: $luci-space-lg;
}

.luci-tab__panel {
  display: none;
  margin: 0 auto;
  max-width: $luci-grid-container-xl;

  &.luci-tab__panel--is-active {
    display: block;
  }
}

.luci-tab__panel--nested {
  display: none;
  padding: $luci-space-lg;

  &.luci-tab__panel--is-active {
    display: block;
  }
}

// ==========================================================================
// Tab breakpoint styles
// ==========================================================================

@media screen and (max-width: $luci-breakpoint-md) {
  .luci-tab__list-item {
    .luci-link {
      font-size: $luci-font-size-sm;
    }
  }

  .luci-tab__list {
    margin-bottom: -1px;
    overflow-y: scroll;
  }
}

@media screen and (min-width: $luci-breakpoint-lg) {
  .luci-tab__list {
    padding-left: 15px;
    padding-right: 15px;
  }
}