// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import "../../global-navigation/mixins/index";
@import "../mixins/index";

/**
 * @summary Subtabs
 *
 * @name sub-tabs
 * @selector .slds-sub-tabs
 * @restrict .slds-tabs_default
 * @support dev-ready
 * @variant
 */

.slds-sub-tabs .slds-tabs_default__nav {
  border-bottom-width: $border-width-thin;
}

/**
 * @summary Subtab item
 * @selector .slds-sub-tabs__item
 * @restrict .slds-sub-tabs li
 */
.slds-sub-tabs__item {
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;

  &.slds-active,
  &.slds-is-open {
    background: $brand-primary-transparent-10;
  }

  &:after {
    content: none;
  }

  .slds-tabs_default__link:focus,
  &.slds-has-focus {
    text-decoration: underline;
  }

  + .slds-sub-tabs__item {
    margin-left: 0;
  }

  @include tab-notification-pulsing-animation;

  /**
   * @summary Success notification on a sub tab
   *
   * @selector .slds-has-success
   * @restrict .slds-sub-tabs__item
   */
  &.slds-has-success {
    @include sub-tab-notification-before($color-background-success-dark, $color-background-success-darker);

    &:before {
      animation-name: success-pulse;
    }
  }

  /**
   * @summary Error notification on a sub tab
   *
   * @selector .slds-has-error
   * @restrict .slds-sub-tabs__item
   */
  &.slds-has-error {
    @include sub-tab-notification-before($color-background-destructive, $color-background-destructive-active);

    &:before {
      animation-name: error-pulse;
    }
  }

  &.slds-has-success,
  &.slds-has-error {
    color: $color-gray-1;

    .slds-indicator_unread {
      background-color: $color-gray-1;
    }

    .slds-indicator_unsaved {
      color: $color-gray-1;
    }
  }

  /**
   * @summary Warning notification on a sub tab
   *
   * @selector .slds-has-warning
   * @restrict .slds-sub-tabs__item
   */
  &.slds-has-warning {
    @include sub-tab-notification-before($color-background-warning, $color-background-warning-dark);

    &:before {
      animation-name: warning-pulse;
    }

    .slds-indicator_unread {
      background-color: currentColor;
    }

    .slds-indicator_unsaved {
      color: currentColor;
    }
  }
}

.slds-has-pinned-regions {

  .slds-sub-tabs__item {

    &.slds-active,
    &.slds-is-open {

      &:before {
        content: '';
        height: 3px;
        display: block;
        background: $brand-primary;
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
      }
    }
  }
}