//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

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

@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/layout';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';

/// Tabs styles
/// @access private
/// @group tabs
@mixin tabs {
  .#{$prefix}--tabs {
    @include reset;
    @include type-style('body-short-01');

    display: flex;
    width: 100%;
    height: auto;
    min-height: rem(40px);
    color: $text-01;
  }

  .#{$prefix}--tabs--container {
    min-height: rem(48px);
  }

  .#{$prefix}--tabs__nav {
    display: flex;
    flex-direction: row;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto hidden;
    list-style: none;
    transition: max-height $duration--fast-01 motion(standard, productive);

    // hide scrollbars
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  //-----------------------------
  // Overflow Nav Buttons
  //-----------------------------
  .#{$prefix}--tabs__overflow-indicator--left,
  .#{$prefix}--tabs__overflow-indicator--right {
    z-index: 1;
    flex: 1 0 auto;
    width: $carbon--spacing-03;
  }

  .#{$prefix}--tabs__overflow-indicator--left {
    margin-right: -$carbon--spacing-03;
    background-image: linear-gradient(to left, transparent, $ui-background);
  }

  .#{$prefix}--tabs__overflow-indicator--right {
    margin-left: -$carbon--spacing-03;
    background-image: linear-gradient(to right, transparent, $ui-background);
  }

  .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
    background-image: linear-gradient(to left, transparent, $ui-01);
  }

  .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right {
    background-image: linear-gradient(to right, transparent, $ui-01);
  }

  .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left {
    background-image: linear-gradient(to left, transparent, $ui-03);
  }

  .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--right {
    background-image: linear-gradient(to right, transparent, $ui-03);
  }

  // Safari-only media query
  // won't appear correctly with CSS custom properties
  // see: code snippet and modal overflow indicators
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
      .#{$prefix}--tabs__overflow-indicator--left {
        margin-right: -$carbon--spacing-05;
        background-image: linear-gradient(
          to left,
          rgba($ui-background, 0),
          $ui-background
        );
      }

      .#{$prefix}--tabs__overflow-indicator--right {
        margin-left: -$carbon--spacing-05;
        background-image: linear-gradient(
          to right,
          rgba($ui-background, 0),
          $ui-background
        );
      }

      .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left {
        background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03);
      }
      .#{$prefix}--tabs--container
        .#{$prefix}--tabs__overflow-indicator--right {
        background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03);
      }
    }
  }

  .#{$prefix}--tab--overflow-nav-button {
    @include button-reset;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: $carbon--spacing-08;

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

  .#{$prefix}--tab--overflow-nav-button--hidden {
    display: none;
  }

  .#{$prefix}--tabs--container .#{$prefix}--tab--overflow-nav-button {
    width: $carbon--spacing-09;
    margin: 0;
    background-color: $ui-03;
  }

  .#{$prefix}--tab--overflow-nav-button svg {
    fill: $icon-01;
  }

  //-----------------------------
  // Item
  //-----------------------------
  .#{$prefix}--tabs__nav-item {
    @include reset;

    display: flex;
    padding: 0;
    cursor: pointer;
    transition: background-color $duration--fast-01 motion(standard, productive);
  }

  .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item {
    margin-left: rem(1px);
  }

  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
    background-color: $ui-03;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item
    + .#{$prefix}--tabs__nav-item {
    margin-left: 0;
    // Draws the border without affecting the inner-content
    box-shadow: rem(-1px) 0 0 0 $ui-04;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item
    + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected
    + .#{$prefix}--tabs__nav-item {
    box-shadow: none;
  }

  .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
    transition: color $duration--fast-01 motion(standard, productive),
      border-bottom-color $duration--fast-01 motion(standard, productive),
      outline $duration--fast-01 motion(standard, productive);
  }

  //-----------------------------
  // Item Hover
  //-----------------------------
  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover {
    background-color: $hover-selected-ui;
  }

  //---------------------------------------------
  // Item Disabled
  //---------------------------------------------
  .#{$prefix}--tabs__nav-item--disabled,
  .#{$prefix}--tabs__nav-item--disabled:hover {
    background-color: transparent;
    outline: none;
    cursor: not-allowed;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
    background-color: $disabled-02;
  }

  //-----------------------------
  // Item Selected
  //-----------------------------
  .#{$prefix}--tabs__nav-item--selected {
    transition: color $duration--fast-01 motion(standard, productive);
  }

  .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link,
  .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus,
  .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:active {
    @include type-style('productive-heading-01');

    color: $text-01;
    border-bottom: 2px solid $interactive-04;
  }

  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected,
  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover {
    background-color: $ui-01;

    .#{$prefix}--tabs__nav-link:focus,
    .#{$prefix}--tabs__nav-link:active {
      box-shadow: none;
    }
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--selected
    .#{$prefix}--tabs__nav-link {
    // height - vertical padding
    line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
    // Draws the border without affecting the inner-content
    box-shadow: inset 0 2px 0 0 $interactive-04;
  }

  .#{$prefix}--tabs--light.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--selected,
  .#{$prefix}--tabs--light.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--selected:hover {
    background-color: $ui-background;
  }

  //-----------------------------
  // Link
  //-----------------------------
  .#{$prefix}--tabs__nav-link {
    @include focus-outline('reset');

    width: rem(160px);
    padding: $spacing-04 $spacing-05 $spacing-03;
    overflow: hidden;
    color: $text-02;
    white-space: nowrap;
    text-decoration: none;
    text-overflow: ellipsis;
    border-bottom: $tab-underline-color;
    transition: border $duration--fast-01 motion(standard, productive),
      outline $duration--fast-01 motion(standard, productive);

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

  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link {
    height: rem(48px);
    padding: $spacing-03 $spacing-05;
    // height - vertical padding
    line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
    border-bottom: 0;
  }

  //-----------------------------
  //  Link Hover
  //-----------------------------
  .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
    color: $text-01;
    border-bottom: $tab-underline-color-hover;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item
    .#{$prefix}--tabs__nav-link {
    border-bottom: none;
  }

  //-----------------------------
  //  Link Disabled
  //-----------------------------
  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
    color: $tab-text-disabled;
    border-bottom: $tab-underline-disabled;
  }

  .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
    color: $tab-text-disabled;
    border-bottom: $tab-underline-disabled;
    cursor: not-allowed;
    pointer-events: none;
  }

  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:active {
    border-bottom: $tab-underline-disabled;
    outline: none;
  }

  .#{$prefix}--tabs--light
    .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-link {
    border-bottom-color: $ui-03;
  }

  .#{$prefix}--tabs--light
    .#{$prefix}--tabs__nav-item--disabled:hover
    .#{$prefix}--tabs__nav-link {
    border-bottom-color: $ui-03;
  }

  .#{$prefix}--tabs--light
    .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-link:focus,
  .#{$prefix}--tabs--light
    .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-link:active {
    border-bottom-color: $ui-03;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-link {
    color: $disabled-03;
    border-bottom: none;
  }

  //-----------------------------
  //  Tab Content Container
  //-----------------------------
  .#{$prefix}--tab-content {
    padding: $carbon--spacing-05;
  }

  //-----------------------------
  // Skeleton state
  //-----------------------------
  .#{$prefix}--tabs.#{$prefix}--skeleton {
    cursor: default;
    pointer-events: none;
  }

  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
    @include skeleton;

    width: rem(75px);
  }

  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
    @include skeleton;

    width: rem(75px);
    margin-right: rem(1px);
  }

  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
    @include hidden;
  }
}

@include exports('tabs') {
  @include tabs;
}
