/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:06 GMT
 */
/* mixins & extensions */
/* helper to properly scale internal durations */
/**
* Currently only used in Checkbox.
*/
:host {
  --calcite-internal-tab-nav-gradient-start-side: left;
  --calcite-internal-tab-nav-gradient-end-side: right;
  position: relative;
  display: flex;
}

.scale-s {
  --calcite-internal-tab-nav-scroller-button-width: 24px;
  min-block-size: 1.5rem;
}

.scale-m {
  --calcite-internal-tab-nav-scroller-button-width: 32px;
  min-block-size: 2rem;
}

.scale-l {
  --calcite-internal-tab-nav-scroller-button-width: 44px;
  min-block-size: 2.75rem;
}

.calcite--rtl {
  --calcite-internal-tab-nav-gradient-start-side: right;
  --calcite-internal-tab-nav-gradient-end-side: left;
}

.tab-nav--start-overflow .tab-titles-slot-wrapper {
  mask-image: linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);
}

.tab-nav--end-overflow .tab-titles-slot-wrapper {
  mask-image: linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);
}

.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper {
  mask-image: linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%);
}

.tab-nav::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

:host([layout=center]) ::slotted(calcite-tab-title) {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  min-inline-size: auto;
  white-space: nowrap;
}
:host([layout=center]) ::slotted(calcite-tab-title[selected]) {
  overflow: unset;
}

:host(:not([bordered])) .scale-l {
  --calcite-internal-tab-nav-gap: var(--calcite-size-xxl);
}
:host(:not([bordered])) .scale-m {
  --calcite-internal-tab-nav-gap: var(--calcite-size-xl);
}
:host(:not([bordered])) .scale-s {
  --calcite-internal-tab-nav-gap: var(--calcite-size-lg);
}
:host(:not([bordered])) .tab-titles-slot-wrapper {
  gap: var(--calcite-internal-tab-nav-gap);
}

:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper {
  padding-inline: var(--calcite-spacing-xxl);
}

.tab-nav,
.tab-titles-slot-wrapper {
  display: flex;
  inline-size: 100%;
  justify-content: flex-start;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-button-container {
  position: absolute;
  inset-block: 0px;
}
.scroll-button-container calcite-button {
  --calcite-offset-invert-focus: 1;
  --calcite-color-text-1: var(--calcite-color-text-3);
  block-size: 100%;
}
.scroll-button-container calcite-button:hover {
  --calcite-color-text-1: unset;
  --calcite-color-foreground-1: var(--calcite-color-transparent-hover);
  --calcite-color-foreground-3: var(--calcite-color-transparent);
}

.scroll-button-container--forward {
  inset-inline-end: 0;
  z-index: var(--calcite-z-index);
}

.scroll-button-container--backward {
  inset-inline-start: 0;
  z-index: var(--calcite-z-index);
}

:host(:not([bordered])) .scroll-button-container--backward::before,
:host(:not([bordered])) .scroll-button-container--forward::before {
  background-color: var(--calcite-color-border-3);
  content: "";
  inline-size: var(--calcite-border-width-sm);
  inset-block-start: var(--calcite-border-width-md);
  inset-block-end: var(--calcite-border-width-md);
  position: absolute;
}
:host(:not([bordered])) .scroll-button-container--backward::before {
  inset-inline-end: 0;
}
:host(:not([bordered])) .scroll-button-container--forward::before {
  inset-inline-start: 0;
}

:host([hidden]) {
  display: none;
}

[hidden] {
  display: none;
}