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

@import 'carbon-components/scss/globals/scss/css--helpers';
@import 'carbon-components/scss/components/tabs/tabs';

:host(#{$prefix}-tabs),
:host(#{$prefix}-tabs-skeleton) {
  @extend .#{$prefix}--tabs;
}

:host(#{$prefix}-tabs) {
  @include focus-outline('reset');

  display: block;

  &[color-scheme='light'] {
    background-color: $ui-01;
  }

  .#{$prefix}--tabs-trigger svg {
    width: auto;
    height: auto;
  }
}

:host(#{$prefix}-tabs:focus) {
  .#{$prefix}--tabs-trigger {
    @include focus-outline('outline');
  }
}

:host(#{$prefix}-tabs[type='container']) {
  @extend .#{$prefix}--tabs--container;
}

:host(#{$prefix}-tab) {
  @extend .#{$prefix}--tabs__nav-item;

  outline: none;

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

:host(#{$prefix}-tab:hover) {
  @include carbon--breakpoint(md) {
    background-color: transparent;
    box-shadow: none;
  }

  background-color: $hover-ui;
  box-shadow: 0 -1px 0 $hover-ui;
}

:host(#{$prefix}-tab[type='container']) {
  @include carbon--breakpoint(md) {
    background-color: $ui-03;

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

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

  &:hover {
    @include carbon--breakpoint(md) {
      background-color: $hover-selected-ui;
    }
  }

  a.#{$prefix}--tabs__nav-link {
    @include carbon--breakpoint(md) {
      height: rem(48px);
      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); // height - vertical padding
    }
  }
}

// `[role]` is only for specificity.
// We have `:not()` usage in the corresponding Carbon core style
// which puts specificity of "specific" scenario though the style is for "regular" scenario
:host(#{$prefix}-tab[type='container'][role]),
:host(#{$prefix}-tab[type='container'][role]:hover) {
  a.#{$prefix}--tabs__nav-link {
    @include carbon--breakpoint(md) {
      border-bottom: none;
    }
  }
}

// `[role]` is only for specificity.
// We have `:not()` usage in the corresponding Carbon core style
// which puts specificity of "specific" scenario though the style is for "regular" scenario
:host(#{$prefix}-tab[disabled][role]),
:host(#{$prefix}-tab[disabled][role]:hover) {
  background-color: $ui-01;
  box-shadow: none;
  cursor: not-allowed;
  outline: none;

  @include carbon--breakpoint(md) {
    background-color: transparent;
  }

  .#{$prefix}--tabs__nav-link {
    color: $tab-text-disabled;
    pointer-events: none;

    @include carbon--breakpoint(md) {
      border-bottom: $tab-underline-disabled;
    }
  }
}

:host(#{$prefix}-tab[type='container'][disabled][role]),
:host(#{$prefix}-tab[type='container'][disabled][role]:hover) {
  @include carbon--breakpoint(md) {
    background-color: $disabled-02;
  }
}

:host(#{$prefix}-tab[type='container'][disabled][role]) .#{$prefix}--tabs__nav-link {
  @include carbon--breakpoint(md) {
    color: $disabled-03;
  }
}

:host(#{$prefix}-tab[selected]) {
  background-color: $hover-ui;
  transition: color $duration--fast-01 motion(standard, productive);

  &:hover {
    background-color: $selected-ui;

    @include carbon--breakpoint(md) {
      background-color: transparent;
    }
  }

  .#{$prefix}--tabs__nav-link {
    &,
    // Need to override Carbon core's non-selected focus color
    &:focus,
    &:active {
      color: $text-01;
    }
  }

  @include carbon--breakpoint(md) {
    display: flex;
    background-color: transparent;

    .#{$prefix}--tabs__nav-link {
      @include type-style('heading-01');
      border-bottom: 3px solid $interactive-01;

      &:focus,
      &:active {
        border-bottom-width: 2px;
      }
    }
  }
}

:host(#{$prefix}-tab[type='container'][selected]),
:host(#{$prefix}-tab[type='container'][selected]:hover) {
  @include carbon--breakpoint(md) {
    background-color: $ui-01;

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

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

:host(#{$prefix}-tab[highlighted]),
:host(#{$prefix}-tab[highlighted]:hover) {
  background-color: $hover-ui;
  box-shadow: 0 -1px 0 $hover-ui;

  // `highlighted` is not used in wide mode,
  // but we need guard for a scenario where a tab is highlighted and then the UI turned to wide mode
  @include carbon--breakpoint(md) {
    background-color: transparent;
    box-shadow: none;
  }
}

:host(#{$prefix}-tab[in-focus][selected]),
:host(#{$prefix}-tab[in-focus][selected]:hover) {
  @include carbon--breakpoint(md) {
    @include focus-outline('outline');

    // `[role]` is only for specificity.
    // We have `:not()` usage in the corresponding Carbon core style
    // which puts specificity of "specific" scenario though the style is for "regular" scenario
    a.#{$prefix}--tabs__nav-link[role] {
      border-bottom-width: 2px;
    }
  }
}

:host(#{$prefix}-tab[highlighted][selected]),
:host(#{$prefix}-tab[highlighted][selected]:hover) {
  background-color: $selected-ui;

  // `highlighted` is not used in wide mode,
  // but we need guard for a scenario where a tab is highlighted and then the UI turned to wide mode
  @include carbon--breakpoint(md) {
    background-color: transparent;
  }
}

// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute
:host(#{$prefix}-tab[disabled][selected]),
:host(#{$prefix}-tab[disabled][selected]:hover),
:host(#{$prefix}-tab[disabled][in-focus][selected]),
:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {
  display: flex;
  background-color: $ui-01;
  box-shadow: none;

  @include carbon--breakpoint(md) {
    @include focus-outline('reset');

    background-color: transparent;
  }

  .#{$prefix}--tabs__nav-link {
    @include carbon--breakpoint(md) {
      @include type-style('body-short-01');

      color: $tab-text-disabled;
      border-bottom: $tab-underline-disabled;

      &:focus,
      &:active {
        border-bottom-width: 3px;
      }
    }
  }
}

:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {
  @include skeleton;
  width: rem(100px);
}

:host(#{$prefix}-tab-skeleton) {
  @include carbon--breakpoint(md) {
    margin-left: rem(2px);
  }

  .#{$prefix}--tabs__nav-link {
    @include skeleton;
    width: rem(75px);
    height: rem(12px);
  }
}

:host(#{$prefix}-tab-skeleton:first-of-type) {
  @include carbon--breakpoint(md) {
    margin-left: 0;
  }
}