@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/generated/size";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// Tab icon styles
/// @access private
/// @group components
@mixin tabs-icon {
  .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--tabs__nav-item--icon {
    display: flex;
    align-items: center;
    padding-inline-start: $carbon--spacing-03;
  }

  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-item--icon svg {
    fill: $disabled-02;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-item--icon
    svg {
    fill: $text-on-color-disabled;
  }

  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon {
    inline-size: 100%;
  }

  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--icon {
    margin-inline-start: auto;
    padding-inline-start: $carbon--spacing-05;
  }
}

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

/// Icon-only tab styles
/// The nav link is a square icon trigger at every breakpoint and the label is
/// surfaced as a portalled tooltip (rendered by `Tab.svelte`). Carbon React v11
/// keeps icon-only tabs square on narrow viewports rather than collapsing them
/// into a labeled dropdown, so the trigger size is breakpoint-agnostic.
/// @access private
/// @group components
@mixin tabs-icon-only {
  $icon-tab-size: $carbon--spacing-08; // 40px
  $icon-tab-size-lg: $carbon--spacing-09; // 48px
  // Container tabs are 48px tall, so icon-only container tabs are square at 48px.
  $icon-tab-size-container: $carbon--spacing-09; // 48px

  // Square icon trigger. Double class (and explicit :focus/:active) so these win
  // over the base `a.bx--tabs__nav-link` rules imported after this file.
  a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only,
  a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only:focus,
  a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only:active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    inline-size: $icon-tab-size;
    min-inline-size: $icon-tab-size;
    block-size: $icon-tab-size;
    padding: 0;
  }

  // Lift the icon out of its default beside-label spacing so it sits flush.
  .#{$prefix}--tabs__nav-link--icon-only .#{$prefix}--tabs__nav-item--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  // Container type adds an auto inline-start margin to push the icon to the end;
  // neutralize it so the icon stays centered.
  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-link--icon-only
    .#{$prefix}--tabs__nav-item--icon {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  // The label is the accessible name and tooltip text only; never shown inline.
  .#{$prefix}--tabs__nav-link--icon-only .#{$prefix}--tabs__nav-item-label {
    display: none;
  }

  // Container type: contained tabs are 48px tall, so make the icon-only link a
  // 48px square (instead of the 40px default) so it does not look stretched.
  .#{$prefix}--tabs--container
    a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only,
  .#{$prefix}--tabs--container
    a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only:focus,
  .#{$prefix}--tabs--container
    a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only:active {
    inline-size: $icon-tab-size-container;
    min-inline-size: $icon-tab-size-container;
    block-size: $icon-tab-size-container;
    padding: 0;
  }

  // Large icon scale: 48px square trigger. The `.bx--tabs__icon--lg` ancestor
  // raises specificity above the default-scale rules above.
  .#{$prefix}--tabs__icon--lg {
    a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only,
    &.#{$prefix}--tabs--container
      a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon-only {
      inline-size: $icon-tab-size-lg;
      min-inline-size: $icon-tab-size-lg;
      block-size: $icon-tab-size-lg;

      &:focus,
      &:active {
        inline-size: $icon-tab-size-lg;
        min-inline-size: $icon-tab-size-lg;
      }
    }

    // 20px icon at lg scale (Carbon React); default scale stays 16px.
    .#{$prefix}--tabs__nav-link--icon-only .#{$prefix}--tabs__nav-item--icon svg {
      block-size: to-rem(20px);
      inline-size: to-rem(20px);
    }
  }
}

@include exports('tabs-icon-only') {
  @include tabs-icon-only;
}

/// Overflow / scrollable tab list (Carbon React v11 parity).
/// Carbon v10 collapses tabs into a dropdown menu on narrow viewports, which is
/// unexpected and not fully accessible. Instead, keep the tab list inline at
/// every breakpoint and make it horizontally scrollable, surfacing scroll
/// buttons + edge fades only when the list overflows its container.
///
/// Carbon v10.58 already ships the scrollable-tabs CSS (`bx--tabs--scrollable`,
/// `bx--tab--overflow-nav-button`, `bx--tabs__overflow-indicator--*`), so the
/// component reuses those classes and this partial only fills two gaps the
/// shipped CSS leaves for the legacy `bx--tabs__nav*` structure:
///   1. take the nav out of the mobile dropdown overlay (static + scrollable);
///   2. render the desktop tab appearance below `md`, since Carbon is
///      mobile-first and its default tab styling lives under `min-width: 42rem`.
/// @access private
/// @group components
@mixin tabs-overflow {
  // (1) The legacy nav is an absolutely-positioned dropdown overlay by default;
  // keep it in flow and horizontally scrollable at every breakpoint.
  .#{$prefix}--tabs .#{$prefix}--tabs__nav {
    position: static;
    z-index: auto;
    display: flex;
    flex-direction: row;
    max-block-size: none;
    overflow-x: auto;
    // The mobile dropdown overlay paints the nav `$ui-01`; drop it so line tabs
    // are transparent and container cells provide their own background.
    background: transparent;
    box-shadow: none;
    transition: none;
    // Keyboard navigation scrolls the focused tab into view by adjusting
    // scrollLeft; keep that instant so reads stay consistent (the overflow
    // buttons request smooth scrolling explicitly via `scrollBy`).
    scroll-behavior: auto;
    // Hide the native scrollbar; scrolling is driven by the overflow buttons,
    // touch drag, and trackpad gestures.
    scrollbar-width: none;
  }

  .#{$prefix}--tabs .#{$prefix}--tabs__nav::-webkit-scrollbar {
    display: none;
  }

  // Size every tab to its content instead of the legacy `width: 100%` dropdown
  // row, so tabs sit close together and the list scrolls (Carbon's
  // `bx--tabs--scrollable .bx--tabs__nav-item { flex: none }` pins the width).
  .#{$prefix}--tabs .#{$prefix}--tabs__nav-item {
    inline-size: auto;
  }

  // Line (non-container) tabs are content-width at every breakpoint (Carbon
  // React v11), replacing the legacy fixed 10rem tab width that left them spread
  // out. Container, dismissible, and icon-only tabs carry their own widths.
  .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible):not(.#{$prefix}--tabs--icon-only)
    a.#{$prefix}--tabs__nav-link,
  .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible):not(.#{$prefix}--tabs--icon-only)
    a.#{$prefix}--tabs__nav-link:focus,
  .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible):not(.#{$prefix}--tabs--icon-only)
    a.#{$prefix}--tabs__nav-link:active {
    inline-size: auto;
  }

  // (2) Below `md`, render the inline desktop tab appearance instead of Carbon's
  // mobile-first dropdown rows. Values mirror Carbon's own `min-width: 42rem`
  // tab rules so the tabs look identical above and below the breakpoint.
  // Override partials emit before Carbon base, so every rule here carries a
  // leading `.bx--tabs` (and `.bx--tabs--container`) ancestor to out-specify the
  // equal-specificity mobile-first defaults that load afterward.
  @include carbon--breakpoint-down(md) {
    // Drop the mobile dropdown-row side margin (`0 16px`) on every variant so
    // tabs sit flush instead of spaced apart (line, container, icon-only,
    // dismissible all inherit this legacy margin below `md`).
    .#{$prefix}--tabs a.#{$prefix}--tabs__nav-link {
      margin: 0;
    }

    // Reveal the selected tab (the dropdown hides it to show it in the trigger).
    .#{$prefix}--tabs
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
      display: flex;
    }

    .#{$prefix}--tabs .#{$prefix}--tabs__nav-item {
      background: transparent;
      block-size: auto;
    }

    .#{$prefix}--tabs
      .#{$prefix}--tabs__nav-item
      + .#{$prefix}--tabs__nav-item {
      margin-inline-start: to-rem(1px);
    }

    .#{$prefix}--tabs
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
      background-color: transparent;
      box-shadow: none;
    }

    .#{$prefix}--tabs
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled)
      + .#{$prefix}--tabs__nav-item {
      box-shadow: none;
    }

    // Line (non-container) link: content-width inline tab with the bottom
    // selection border. Width comes from the unconditional rule above; here we
    // restore the desktop padding/border the mobile dropdown rows override.
    // Scoped away from container / dismissible / icon-only.
    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible):not(.#{$prefix}--tabs--icon-only)
      a.#{$prefix}--tabs__nav-link,
    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible):not(.#{$prefix}--tabs--icon-only)
      a.#{$prefix}--tabs__nav-link:focus,
    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible):not(.#{$prefix}--tabs--icon-only)
      a.#{$prefix}--tabs__nav-link:active {
      block-size: auto;
      padding: $carbon--spacing-04 $carbon--spacing-05 $carbon--spacing-03;
      border-block-end: 2px solid $ui-03;
      line-height: inherit;
    }

    // Selected emphasis (bold + color) applies to every non-container tab,
    // including dismissible.
    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical)
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      @include carbon--type-style("productive-heading-01");

      color: $text-01;
    }

    // The link bottom border (selected / hover / disabled indicator) is excluded
    // from dismissible, whose underline is moved to the nav item by the
    // dismissible mixin — a link border here would double it up.
    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible)
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      border-block-end: 2px solid $interactive-04;
    }

    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible)
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      border-block-end: 2px solid $ui-04;
      color: $text-01;
    }

    .#{$prefix}--tabs:not(.#{$prefix}--tabs--container):not(.#{$prefix}--tabs--vertical):not(.#{$prefix}--tabs--dismissible)
      .#{$prefix}--tabs__nav-item--disabled
      a.#{$prefix}--tabs__nav-link {
      border-block-end: 2px solid $disabled-01;
      color: $disabled-02;
    }

    // Container type below `md`: gray cells, vertical dividers, and a top inset
    // selection indicator on the active tab.
    .#{$prefix}--tabs.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
      background-color: $ui-03;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--container
      .#{$prefix}--tabs__nav-item
      + .#{$prefix}--tabs__nav-item {
      box-shadow: to-rem(-1px) 0 0 0 $ui-04;
      margin-inline-start: 0;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--container
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
      background-color: $hover-selected-ui;
    }

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

    .#{$prefix}--tabs.#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
      block-size: $carbon--spacing-09;
      inline-size: auto;
      padding: $carbon--spacing-03 $carbon--spacing-05;
      border-block-end: none;
      line-height: calc(#{$carbon--spacing-09} - #{$carbon--spacing-03} * 2);
    }

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

    .#{$prefix}--tabs.#{$prefix}--tabs--container
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      @include carbon--type-style("productive-heading-01");

      // Re-assert the cell line-height the heading type style overwrites, so the
      // bold selected label stays vertically aligned with the other tabs.
      box-shadow: inset 0 2px 0 0 $interactive-04;
      border-block-end: none;
      line-height: calc(#{$carbon--spacing-09} - #{$carbon--spacing-03} * 2);
      color: $text-01;
    }

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

    .#{$prefix}--tabs.#{$prefix}--tabs--container
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      border-block-end: none;
    }
  }
}

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

/// Tab full-width styles
/// @access private
/// @group components
@mixin tabs-full-width {
  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav {
    width: 100%;
  }

  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav-item {
    flex: 1;
  }

  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav-link {
    width: 100%;
    max-width: none;
  }
}

@include exports('tabs-full-width') {
  @include tabs-full-width;
}

/// Tab tall (secondary label) styles
/// @access private
/// @group components
@mixin tabs-tall {
  @include carbon--breakpoint(md) {
    .#{$prefix}--tabs--tall.#{$prefix}--tabs--container {
      min-height: 4rem;
    }

    .#{$prefix}--tabs--tall .#{$prefix}--tabs__nav-item {
      min-height: 4rem;
    }

    .#{$prefix}--tabs--tall.#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      height: 100%;
    }
  }

  .#{$prefix}--tabs__nav-item-label-wrapper {
    display: flex;
    line-height: normal;
  }

  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item-secondary-label {
    @include carbon--type-style("caption-01");

    min-height: 1rem;
  }
}

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

/// Tab container panel background
/// @access private
/// @group components
@mixin tabs-container-panel {
  .#{$prefix}--tabs--container ~ .#{$prefix}--tab-content {
    background-color: $ui-01;
  }
}

@include exports('tabs-container-panel') {
  @include tabs-container-panel;
}

/// Container type: remove link border on disabled tab hover
/// Default tabs add a bottom border to the nav link on disabled hover; container
/// tabs use a different visual treatment and should not show this border.
/// @access private
/// @group components
@mixin tabs-container-disabled-hover {
  .#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--disabled:hover
    .#{$prefix}--tabs__nav-link {
    border-bottom: none;
    border-block-end: none;
  }
}

@include exports('tabs-container-disabled-hover') {
  @include tabs-container-disabled-hover;
}

/// Container type: do not apply fixed 10rem width to nav links.
/// Default tabs get width: 10rem at 42rem viewport from base Carbon styles
/// (including :focus and :active); container tabs should size naturally.
/// @access private
/// @group components
@mixin tabs-container-nav-link-width {
  @media (min-width: 42rem) {
    .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link,
    .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link:focus,
    .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link:active {
      width: auto;
    }
  }
}

@include exports('tabs-container-nav-link-width') {
  @include tabs-container-nav-link-width;
}

/// Dismissible tab styles: a close button per tab, left-aligned icons, and the
/// selection indicator re-homed from the nav link to the nav item so it spans
/// both the link and the close button. In Carbon v10 the underline (default)
/// and inset top border (container) sit on the link, which is narrower than the
/// item once a close button is added.
/// @access private
/// @group components
@mixin tabs-dismissible {
  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-item {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-link {
    display: flex;
    align-items: center;
    min-inline-size: 0;
  }

  // Default: size the link to its content so the close button sits next to the
  // label with a fixed gap, instead of growing to the full tab width. The
  // asymmetric vertical padding mirrors Carbon's desktop tab link at every
  // breakpoint so the close-button nudge below lands consistently.
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-link {
    flex: 0 1 auto;
    padding: $carbon--spacing-04 $carbon--spacing-03 $carbon--spacing-03
      $carbon--spacing-05;
  }

  // Container: fill the cell so the close button aligns to the trailing edge.
  .#{$prefix}--tabs--dismissible.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-link {
    flex: 1 1 auto;
    padding-inline-end: $carbon--spacing-04;
  }

  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-item--icon-left {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding-inline-end: $carbon--spacing-03;
  }

  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-item--close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
  }

  // Default: the link's asymmetric vertical padding ($spacing-04 top /
  // $spacing-03 bottom) drops the label below the nav-item center, so nudge the
  // close button down to share the text's optical baseline.
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item--close {
    position: relative;
    inset-block-start: $carbon--spacing-01;
  }

  // Container: nudge the close button off the label.
  .#{$prefix}--tabs--dismissible.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--close {
    margin-inline-start: $carbon--spacing-02;
  }

  // Trailing padding so the close button is not flush with the tab edge.
  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-item {
    padding-inline-end: $carbon--spacing-03;
  }

  // Move the focus outline from the link to the whole nav item so it wraps the
  // label and the close button as a single target.
  .#{$prefix}--tabs--dismissible .#{$prefix}--tabs__nav-item:focus-within {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  .#{$prefix}--tabs--dismissible a.#{$prefix}--tabs__nav-link:focus,
  .#{$prefix}--tabs--dismissible a.#{$prefix}--tabs__nav-link:active {
    outline: none;
  }

  // Default variant: drop Carbon's fixed 10rem link width (including the
  // focus/active width reset) so the tab sizes to its content.
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    a.#{$prefix}--tabs__nav-link,
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    a.#{$prefix}--tabs__nav-link:focus,
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    a.#{$prefix}--tabs__nav-link:active {
    inline-size: auto;
  }

  // Default variant: move the bottom underline from the link to the item.
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item {
    border-block-end: 2px solid $ui-03;
  }

  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) {
    border-block-end-color: $ui-04;
  }

  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
    border-block-end-color: $interactive-04;
  }

  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item--disabled {
    border-block-end-color: $disabled-01;
  }

  // Remove the link border in every state so only the item border shows.
  // Carbon's hover/selected link rules outrank a plain link selector, so each
  // state is matched explicitly to win on specificity.
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    a.#{$prefix}--tabs__nav-link,
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
    .#{$prefix}--tabs__nav-link,
  .#{$prefix}--tabs--dismissible:not(.#{$prefix}--tabs--container)
    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
    .#{$prefix}--tabs__nav-link {
    border-block-end: none;
  }

  // Container variant: move the inset top indicator from the link to the item.
  .#{$prefix}--tabs--dismissible.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
    box-shadow: inset 0 2px 0 0 $interactive-04;
  }

  .#{$prefix}--tabs--dismissible.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
    .#{$prefix}--tabs__nav-link {
    box-shadow: none;
  }

  // The close button is not in the tab order (keyboard dismissal uses Delete on
  // the tab), so suppress its own focus ring. The nav item's :focus-within
  // outline wraps the whole tab, avoiding a doubled outline when it is clicked.
  .#{$prefix}--tabs__nav-item--close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: $carbon--spacing-06;
    block-size: $carbon--spacing-06;
    padding: $carbon--spacing-02;
    border: 0;
    margin: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
  }

  // Guard hover styling against the disabled marker so a disabled close button
  // keeps its disabled treatment on hover instead of lighting up.
  .#{$prefix}--tabs__nav-item--close-icon:not(.#{$prefix}--tabs__nav-item--close-icon--disabled):hover {
    background-color: $hover-ui;
  }

  .#{$prefix}--tabs__nav-item--close-icon svg {
    fill: $text-02;
  }

  .#{$prefix}--tabs__nav-item--close-icon:not(.#{$prefix}--tabs__nav-item--close-icon--disabled):hover
    svg,
  .#{$prefix}--tabs__nav-item--close-icon:focus svg {
    fill: $text-01;
  }

  .#{$prefix}--tabs__nav-item--close-icon--disabled {
    cursor: not-allowed;
  }

  .#{$prefix}--tabs__nav-item--close-icon--disabled svg,
  .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-item--icon-left
    svg {
    fill: $disabled-02;
  }

  // Container disabled tabs sit on a $disabled-02 background, so the close icon
  // and left icon need a contrasting disabled token to stay visible.
  .#{$prefix}--tabs--dismissible.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--close-icon--disabled
    svg,
  .#{$prefix}--tabs--dismissible.#{$prefix}--tabs--container
    .#{$prefix}--tabs__nav-item--disabled
    .#{$prefix}--tabs__nav-item--icon-left
    svg {
    fill: $text-on-color-disabled;
  }
}

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

/// Vertical tabs (Carbon v11 `TabsVertical` parity), authored from the v11 token
/// map since Carbon v10 ships no vertical variant. At `md` and up the tab list
/// is a fixed left column with a per-item left indicator; below `md` it is a
/// horizontal, scrollable row of contained tabs. The component drops
/// `bx--tabs--container`, so these rules override the default-tab rules and split
/// by `breakpoint-down(md)` / `breakpoint(md)` so the orientations stay separate.
/// @access private
/// @group components
@mixin tabs-vertical {
  .#{$prefix}--tabs--vertical-container {
    display: flex;
    flex-direction: column;

    @include carbon--breakpoint(md) {
      flex-direction: row;
      align-items: stretch;
    }
  }

  // `Tab` renders the icon after the label; move it before the label.
  .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item--icon {
    order: -1;
    padding-inline: 0 $carbon--spacing-03;
  }

  @include carbon--breakpoint-down(md) {
    // The nav is an absolutely-positioned dropdown overlay by default.
    .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav {
      position: static;
      z-index: auto;
      max-height: none;
      box-shadow: none;
      flex-direction: row;
      overflow-x: auto;
      background-color: $ui-01;
    }

    // The selected item is hidden by default below `md` (legacy dropdown).
    .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item,
    .#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
      display: flex;
      flex: none;
      block-size: $carbon--spacing-09;
      inline-size: auto;
      margin: 0;
      background-color: $ui-03;
    }

    .#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item
      + .#{$prefix}--tabs__nav-item {
      box-shadow: inset 1px 0 0 0 $ui-04;
    }

    .#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
      background-color: $ui-01;
      box-shadow: inset 0 2px 0 0 $interactive-04;
    }

    .#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):hover {
      background-color: $hover-selected-ui;
    }

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

    // The base disabled text token equals the disabled background here.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--disabled
      a.#{$prefix}--tabs__nav-link {
      color: $disabled-03;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical a.#{$prefix}--tabs__nav-link,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical a.#{$prefix}--tabs__nav-link:focus,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical a.#{$prefix}--tabs__nav-link:active {
      display: flex;
      align-items: center;
      inline-size: auto;
      block-size: 100%;
      padding: $carbon--spacing-03 $carbon--spacing-05;
      border: none;
      margin: 0;
      line-height: inherit;
    }

    // Remove the base hover-link bottom border, which would shift the label.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      border: none;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      @include carbon--type-style("productive-heading-01");

      border: none;
      color: $text-01;
    }

    .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item-label {
      overflow: hidden;
      max-inline-size: to-rem(160px);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .#{$prefix}--tabs--vertical ~ .#{$prefix}--tab-content {
      background-color: $ui-01;
    }
  }

  @include carbon--breakpoint(md) {
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical {
      flex: 0 0 auto;
      inline-size: to-rem(160px);
      min-height: 0;
      background-color: $ui-01;
    }

    // The nav is an absolutely-positioned dropdown overlay by default.
    .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav {
      position: static;
      z-index: auto;
      max-height: none;
      box-shadow: none;
      flex-direction: column;
      inline-size: 100%;
      max-width: none;
      overflow: visible;
    }

    .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item {
      flex: none;
      block-size: $carbon--spacing-10;
      inline-size: 100%;
      margin: 0;
      background-color: $ui-01;
      border-block-end: 1px solid $ui-03;
      border-inline-end: 1px solid $ui-03;
    }

    .#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item
      + .#{$prefix}--tabs__nav-item {
      margin: 0;
    }

    // Specificity (0,5,0) keeps the base hover rule
    // (`item:hover + item { box-shadow: none }`) from stripping the indicator.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) {
      box-shadow: inset 3px 0 0 0 $ui-03;
    }

    // Re-assert the bottom separator that the base `--selected { border: none }`
    // strips. The right divider is transparent so the tab merges into the panel.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
      border-block-end: 1px solid $ui-03;
      border-inline-end: 1px solid transparent;
      box-shadow: inset 3px 0 0 0 $interactive-04;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):hover {
      background-color: $hover-ui;
      box-shadow: inset 3px 0 0 0 $ui-04;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--disabled,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--disabled:hover {
      background-color: $ui-01;
      box-shadow: inset 3px 0 0 0 $ui-03;
    }

    // The last tab closes against the panel edge. The second selector
    // out-specifies the selected rule above (0,6,0 > 0,5,0).
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item:last-child,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled):last-child {
      border-block-end: none;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical a.#{$prefix}--tabs__nav-link,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical a.#{$prefix}--tabs__nav-link:focus,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical a.#{$prefix}--tabs__nav-link:active {
      display: flex;
      align-items: center;
      inline-size: 100%;
      block-size: 100%;
      padding: $carbon--spacing-04 $carbon--spacing-05;
      border: none;
      margin: 0;
      line-height: inherit;
    }

    // Top-align so the icon tracks the first line when the label wraps.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      a.#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--icon {
      align-items: flex-start;
    }

    // One line tall so the centered icon lands on the label's first line.
    .#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-link--icon
      .#{$prefix}--tabs__nav-item--icon {
      block-size: to-rem(18px);
    }

    // Remove the base hover-link bottom border, which would shift the label.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      border: none;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical
      .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled)
      a.#{$prefix}--tabs__nav-link {
      @include carbon--type-style("productive-heading-01");

      border: none;
      color: $text-01;
    }

    .#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item-label {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      white-space: normal;
    }

    .#{$prefix}--tabs--vertical ~ .#{$prefix}--tab-content {
      flex: 1 1 auto;
      background-color: $ui-01;
      overflow-y: auto;
    }
  }
}

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

/// Vertical tabs size variants (Carbon v11 `size` on `TabListVertical`). Maps
/// the layout size token to each nav item's height. At `md` and up (the column
/// layout) `xl` equals the default vertical-tab height ($size-xl / spacing-10),
/// so the unsized default and `size="xl"` match, and `sm` clamps labels to one
/// line since it is too short for two. Below `md` the column collapses to a
/// horizontal contained row capped at `lg` height (Carbon React maps `xl` to
/// `lg` there), where the default row height ($spacing-09) already equals `lg`.
/// @access private
/// @group components
@mixin tabs-vertical-size {
  @include carbon--breakpoint(md) {
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-sm
      .#{$prefix}--tabs__nav-item {
      block-size: $size-sm;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-md
      .#{$prefix}--tabs__nav-item {
      block-size: $size-md;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-lg
      .#{$prefix}--tabs__nav-item {
      block-size: $size-lg;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-xl
      .#{$prefix}--tabs__nav-item {
      block-size: $size-xl;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-sm
      .#{$prefix}--tabs__nav-item-label {
      -webkit-line-clamp: 1;
    }
  }

  @include carbon--breakpoint-down(md) {
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-sm
      .#{$prefix}--tabs__nav-item {
      block-size: $size-sm;
    }

    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-md
      .#{$prefix}--tabs__nav-item {
      block-size: $size-md;
    }

    // `xl` caps at `lg` below `md`; both match the default row height.
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-lg
      .#{$prefix}--tabs__nav-item,
    .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-xl
      .#{$prefix}--tabs__nav-item {
      block-size: $size-lg;
    }
  }
}

@include exports('tabs-vertical-size') {
  @include tabs-vertical-size;
}