@carbon/web-components 2.53.0 → 2.54.0-rc.0

package/es-custom/components/tabs/tabs.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/type' as *;\n@use '@carbon/styles/scss/components/button/index' as *;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as *;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as *;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @include emit-layout-tokens();\n  .#{$prefix}--tabs-nav-content-container {\n    position: relative;\n    overflow: scroll;\n    flex: 1 1 0%;\n    // for some reason, overflow: hidden shrinks the content\n    block-size: $spacing-08;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n  :where(.#{$prefix}--tabs-nav-content) {\n    position: absolute;\n    block-size: 100%;\n    inset-inline-start: 0;\n    transition: $inset-transition;\n  }\n\n  .#{$prefix}--tabs-nav {\n    position: absolute;\n    display: block;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    z-index: 1;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    background-color: var(--tabs-overflow-button-background, $background);\n  }\n}\n\n:host(#{$prefix}-tabs) {\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs-trigger svg {\n    block-size: auto;\n    inline-size: auto;\n  }\n}\n\n:host(#{$prefix}-tabs:focus) {\n  .#{$prefix}--tabs-trigger {\n    @include focus-outline('outline');\n  }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n  .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n  overflow: visible;\n\n  .#{$prefix}--tab--list {\n    overflow: visible;\n  }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n  display: flex;\n  background: transparent;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs__nav-link {\n    @include button-reset.reset($width: false);\n    @include focus-outline('reset');\n    @include type-style('body-compact-01');\n\n    position: relative;\n    overflow: hidden;\n\n    align-items: center;\n    padding: $spacing-04 $spacing-05 $spacing-03;\n    border-block-end: $tab-underline-color;\n    color: $text-secondary;\n    inline-size: 100%;\n    text-align: start;\n    text-decoration: none;\n    text-overflow: ellipsis;\n    transition:\n      border $duration-fast-01 motion(standard, productive),\n      outline $duration-fast-01 motion(standard, productive);\n    white-space: nowrap;\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n\n  outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained'])) {\n  margin-inline-end: convert.to-rem(1px);\n\n  .#{$prefix}--tabs__nav-link {\n    padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n    padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n  }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):last-of-type) {\n  margin-inline-end: 0;\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n  #{$prefix}-badge-indicator,\n:host(\n    #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n        .#{$prefix}--tabs__nav-item--icon-only__20\n      )\n  )\n  #{$prefix}-badge-indicator {\n  margin-block-start: $spacing-02;\n  margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n  flex: 0 0 auto;\n  block-size: $spacing-08;\n  inline-size: $spacing-08;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n  }\n\n  #{$prefix}-tooltip {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n    --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n    --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n    --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n    --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n  }\n\n  #{$prefix}-tooltip::part(popover-container) {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  ::slotted(svg) {\n    display: block;\n    fill: currentColor;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n    #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n  ) {\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    position: relative;\n    inset-block-start: convert.to-rem(1px);\n  }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n  block-size: $spacing-09;\n  inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('heading-compact-01');\n\n    border-block-end: $spacing-01 solid $border-interactive;\n\n    &,\n    // Need to override Carbon core's non-selected focus color\n    &:focus,\n    &:active {\n      color: $text-primary;\n    }\n  }\n\n  display: flex;\n  background-color: transparent;\n  transition: color $duration-fast-01 motion(standard, productive);\n\n  &:hover {\n    background-color: transparent;\n  }\n}\n\n:host(#{$prefix}-tab:hover:not([selected])) {\n  background-color: transparent;\n  box-shadow: 0 -1px 0 $background-hover;\n\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color-hover;\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n  box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n  .#{$prefix}--tabs-nav-content-container {\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n  background-color: $layer-accent-01;\n\n  a.#{$prefix}--tabs__nav-link {\n    padding: $spacing-03 $spacing-05;\n    block-size: $spacing-09;\n    // height - vertical padding\n    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: rem(-1px) 0 0 0 $border-strong;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n  a.#{$prefix}--tabs__nav-link {\n  box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n  background-color: transparent;\n  box-shadow: none;\n  cursor: not-allowed;\n  outline: none;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color;\n    color: $tab-text-disabled;\n    outline: none;\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n  .#{$prefix}--tabs__nav-link {\n  background-color: $button-disabled;\n  border-block-end: none;\n  color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n  background-color: $layer-01;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: inset 0 $spacing-01 0 0 $interactive;\n    // height - vertical padding\n    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n  }\n\n  .#{$prefix}--tabs__nav-link:focus,\n  .#{$prefix}--tabs__nav-link:active {\n    box-shadow: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n  background-color: $layer-accent-hover;\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n  display: flex;\n  background-color: transparent;\n  box-shadow: none;\n\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('body-short-01');\n\n    border-block-end: $tab-underline-color;\n\n    color: $tab-text-disabled;\n\n    &:focus,\n    &:active {\n      border-block-end-width: 3px;\n    }\n  }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n  @include skeleton;\n\n  inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  margin-inline-start: $spacing-01;\n\n  .#{$prefix}--tabs__nav-link {\n    @include skeleton;\n\n    display: flex;\n    align-items: center;\n    padding: 0 layout.density('padding-inline');\n    background-color: transparent;\n    block-size: 100%;\n    border-block-end: 2px solid $skeleton-element;\n    inline-size: 10rem;\n\n    &::before {\n      display: none;\n      content: none;\n    }\n  }\n\n  .#{$prefix}--tabs__nav-item {\n    @include reset;\n\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n    padding: 0;\n    cursor: pointer;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n  }\n\n  span {\n    @include skeleton;\n\n    display: block;\n    block-size: convert.to-rem(14px);\n    inline-size: 100%;\n  }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n  @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n  margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n  @include high-contrast-mode {\n    background-color: SelectedItem;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/type' as *;\n@use '@carbon/styles/scss/components/button/index' as *;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as *;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as *;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @include emit-layout-tokens();\n  .#{$prefix}--tabs-nav-content-container {\n    position: relative;\n    overflow: scroll;\n    flex: 1 1 0%;\n    // for some reason, overflow: hidden shrinks the content\n    block-size: $spacing-08;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n  :where(.#{$prefix}--tabs-nav-content) {\n    position: absolute;\n    block-size: 100%;\n    inset-inline-start: 0;\n    transition: $inset-transition;\n  }\n\n  .#{$prefix}--tabs-nav {\n    position: absolute;\n    display: block;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    z-index: 1;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    background-color: var(--tabs-overflow-button-background, $background);\n  }\n}\n\n:host(#{$prefix}-tabs) {\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs-trigger svg {\n    block-size: auto;\n    inline-size: auto;\n  }\n}\n\n:host(#{$prefix}-tabs:focus) {\n  .#{$prefix}--tabs-trigger {\n    @include focus-outline('outline');\n  }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n  .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n  overflow: visible;\n\n  .#{$prefix}--tab--list {\n    overflow: visible;\n  }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n  display: flex;\n  background: transparent;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n    align-items: center;\n    gap: $spacing-03;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    @include button-reset.reset($width: false);\n    @include focus-outline('reset');\n    @include type-style('body-compact-01');\n\n    position: relative;\n    overflow: hidden;\n\n    align-items: center;\n    padding: $spacing-04 $spacing-05 $spacing-03;\n    border-block-end: $tab-underline-color;\n    color: $text-secondary;\n    inline-size: 100%;\n    text-align: start;\n    text-decoration: none;\n    text-overflow: ellipsis;\n    transition:\n      border $duration-fast-01 motion(standard, productive),\n      outline $duration-fast-01 motion(standard, productive);\n    white-space: nowrap;\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n\n  outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained'])) {\n  .#{$prefix}--tabs__nav-link {\n    padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n    padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n  }\n}\n\n:host(#{$prefix}-tab:not([type='contained']))\n  + :host(#{$prefix}-tab:not([type='contained'])) {\n  margin-inline-start: convert.to-rem(1px);\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n  #{$prefix}-badge-indicator,\n:host(\n    #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n        .#{$prefix}--tabs__nav-item--icon-only__20\n      )\n  )\n  #{$prefix}-badge-indicator {\n  margin-block-start: $spacing-02;\n  margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n  flex: 0 0 auto;\n  block-size: $spacing-08;\n  inline-size: $spacing-08;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n  }\n\n  #{$prefix}-tooltip {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n    --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n    --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n    --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n    --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n  }\n\n  #{$prefix}-tooltip::part(popover-container) {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  ::slotted(svg) {\n    display: block;\n    fill: currentColor;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n    #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n  ) {\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    position: relative;\n    inset-block-start: convert.to-rem(1px);\n  }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n  block-size: $spacing-09;\n  inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('heading-compact-01');\n\n    border-block-end: $spacing-01 solid $border-interactive;\n\n    &,\n    // Need to override Carbon core's non-selected focus color\n    &:focus,\n    &:active {\n      color: $text-primary;\n    }\n  }\n\n  display: flex;\n  background-color: transparent;\n  transition: color $duration-fast-01 motion(standard, productive);\n\n  &:hover {\n    background-color: transparent;\n  }\n}\n\n:host(#{$prefix}-tab:hover:not([selected])) {\n  background-color: transparent;\n\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color-hover;\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n  box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n  .#{$prefix}--tabs-nav-content-container {\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n  background-color: $layer-accent-01;\n\n  a.#{$prefix}--tabs__nav-link {\n    padding: $spacing-03 $spacing-05;\n    block-size: $spacing-09;\n    // height - vertical padding\n    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: rem(-1px) 0 0 0 $border-strong;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n  a.#{$prefix}--tabs__nav-link {\n  box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n  background-color: transparent;\n  box-shadow: none;\n  cursor: not-allowed;\n  outline: none;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color;\n    color: $tab-text-disabled;\n    outline: none;\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n  .#{$prefix}--tabs__nav-link {\n  background-color: $button-disabled;\n  border-block-end: none;\n  color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n  background-color: $layer-01;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: inset 0 $spacing-01 0 0 $interactive;\n    // height - vertical padding\n    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n  }\n\n  .#{$prefix}--tabs__nav-link:focus,\n  .#{$prefix}--tabs__nav-link:active {\n    box-shadow: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n  background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-link:hover {\n    background-color: $layer-accent-hover;\n  }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n  display: flex;\n  background-color: transparent;\n  box-shadow: none;\n\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('body-short-01');\n\n    border-block-end: $tab-underline-color;\n\n    color: $tab-text-disabled;\n\n    &:focus,\n    &:active {\n      border-block-end-width: 3px;\n    }\n  }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n  @include skeleton;\n\n  inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  margin-inline-start: $spacing-01;\n\n  .#{$prefix}--tabs__nav-link {\n    @include skeleton;\n\n    display: flex;\n    align-items: center;\n    padding: 0 layout.density('padding-inline');\n    background-color: transparent;\n    block-size: 100%;\n    border-block-end: 2px solid $skeleton-element;\n    inline-size: 10rem;\n\n    &::before {\n      display: none;\n      content: none;\n    }\n  }\n\n  .#{$prefix}--tabs__nav-item {\n    @include reset;\n\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n    padding: 0;\n    cursor: pointer;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n  }\n\n  span {\n    @include skeleton;\n\n    display: block;\n    block-size: convert.to-rem(14px);\n    inline-size: 100%;\n  }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n  @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n  margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n  @include high-contrast-mode {\n    background-color: SelectedItem;\n  }\n}\n\n:host(#{$prefix}-tab) {\n  .#{$prefix}--tabs__nav-link--dismissable {\n    display: flex;\n    padding-inline-end: $spacing-08;\n  }\n  .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {\n    padding-inline-end: calc($spacing-09 - 1px);\n  }\n}\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--dismissable {\n    padding-inline-end: calc($spacing-09 - 1px);\n  }\n}\n:host(#{$prefix}-tab) {\n  .#{$prefix}--tabs__nav-item--close {\n    position: relative;\n    display: flex;\n    align-items: center;\n    inset-inline-start: calc(-#{$spacing-04} - 1px);\n    margin-inline-start: calc(-#{$spacing-06} + 1px);\n\n    &[disabled] {\n      pointer-events: none;\n    }\n  }\n  .#{$prefix}--tabs__nav-item--close--hidden {\n    display: none;\n  }\n  .#{$prefix}--tabs__nav-item--close::part(button) {\n    @include button-reset.reset();\n\n    block-size: convert.to-rem(24px);\n    inline-size: convert.to-rem(24px);\n    padding-block: $spacing-02;\n    padding-inline: $spacing-02;\n    pointer-events: inherit;\n\n    svg {\n      block-size: convert.to-rem(16px);\n      fill: $text-secondary;\n      inline-size: convert.to-rem(16px);\n    }\n\n    svg:hover {\n      fill: $icon-primary;\n    }\n\n    &:hover {\n      background-color: $layer-hover;\n    }\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n}\n"],"mappings":""}