@use "vars" as *;
@use "../../config" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../spacing" as *;
@use "../../motion" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/rotate" as *;
@use "../../utilities/box-shadow" as *;
@use "../../utilities/component-tokens" as *;
@use "../../utilities/layer" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/convert" as *;

/// Tabs styles
/// @access public
/// @group tabs
@mixin tabs {
  .#{$prefix}--tabs {
    @include type-style("body-short");
    @include font-family("sans");
    color: $text-body-default;
    font-weight: 600;
    height: auto;
    width: 100%;
    position: relative;
    overflow: auto;
    max-width: 100%;
  }

  .#{$prefix}--tab-content {
    font: inherit;
    vertical-align: baseline;
    font-size: inherit;
    font-weight: 400;
  }

  .#{$prefix}--tabs__nav__bar {
    position: absolute;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    background: $action-default-fill-primary-default;
    z-index: 10;
    height: 3px;
    bottom: 0;
    
    &__no-animation{
      display: none;
    }
  }

  .#{$prefix}--tabs-trigger-text {
    text-decoration: none;
    font-weight: 600;
    color: $text-body-default;

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

  .#{$prefix}--tabs__nav {
    @include layer("overlay");
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    z-index: z("dropdown");
    a {
      text-decoration: none;
    }
    @include type-style("body-short-02");
    flex-direction: row;
    box-shadow: none;
    z-index: auto;

    @include breakpoint("xlg") {
      margin-left: 0;
    }
  }

  .#{$prefix}--tabs__nav--inline {
    position: relative;
    margin-left: 0;
    margin-right: 0;
  }

  .#{$prefix}--tabs__nav-item {
    @include type-style("body-short");
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    > a,
    > span {
      display: block;
      padding: $spacing-04 $spacing-03;
    }

    & + & {
      margin-left: $spacing-04;
    }
  }

  .#{$prefix}--tabs__nav-item--selected {
    .#{$prefix}--tabs__nav-link {
      color: $action-default-link-default;

      &:focus {
        color: $action-default-link-focus;
      }
    }
  }

  .#{$prefix}--tabs /* TODO: --no-animation */ {

    .#{$prefix}--tabs__nav-item {
      position: relative;
    }
    .#{$prefix}--tabs__nav-item--selected {
      color: $action-default-fill-primary-default;

      // &:after {
      //   content: "";
      //   display: block;
      //   position: absolute;
      //   background: $action-default-fill-primary-default;
      //   height: 3px;
      //   bottom: 0;
      //   left: 0;
      //   right: 0;
      // }
    }
  }

  .#{$prefix}--tabs__nav-item--disabled {
    .#{$prefix}--tabs__nav-link {
      color: $action-default-fill-primary-disable;
      cursor: not-allowed;

      &:hover,
      &:focus {
        color: $action-default-fill-primary-disable !important;
      }
    }
  }

  .#{$prefix}--tabs__nav-link {
    display: inline-block;
    color: $text-body-default;
    text-decoration: none;
    padding: $spacing-05 $spacing-03 * 1.2;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    &:focus {
      color: $text-body-default;
      outline: 1px solid transparent;
    }

    &:hover {
      color: $action-default-link-default;
    }
  }

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

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

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

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

}