:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
   * @prop --border: The border of the tab. Defaults to `2px solid var(--nano-color-neutral-300)`.
   * @prop --border-hover-color: The color of the border on hover. Defaults to `var(--nano-color-primary-700)`.
   * @prop --border-active-color: The color of the border when active. Defaults to `var(--nano-color-primary-1000)`.
   * @prop --text-hover-color: The color of the text on hover. Defaults to `var(--nano-color-primary-1000)`.
   * @prop --text-active-color: The color of the text when active. Defaults to `var(--nano-color-primary-1000)`.
   * @prop --padding: The padding of the tab. Defaults to `var(--nano-spacing-md)`.
   */
  --border: 2px solid var(--nano-color-neutral-300);
  --border-hover-color: var(--nano-color-primary-700);
  --border-active-color: var(--nano-color-primary-1000);
  --text-hover-color: var(--nano-color-primary-1000);
  --text-active-color: var(--nano-color-primary-1100);
  --padding: var(--nano-spacing-md);
  font-size: var(--nano-font-size-sm);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  display: inline-block;
  cursor: pointer;
  color: var(--nano-color-neutral-1400);
  border: var(--border);
  border-inline-end-width: 0;
  border-inline-start-width: 0;
  border-block-start-width: 0;
  border-block-end: var(--border);
}

:host(:not([disabled]):hover) {
  border-color: var(--border-hover-color);
  color: var(--text-hover-color);
}

:host(:not([disabled]):active),
:host([active]) {
  border-color: var(--border-active-color);
  color: var(--text-active-color);
}

:host(.nano-sortable__dragged) {
  background: var(--nano-color-base-0);
  opacity: 0.9 !important;
  box-shadow: var(--nano-shadow-l0) !important;
}

.tab {
  all: unset;
  padding: var(--padding);
  display: flex;
  white-space: nowrap;
  align-items: center;
  position: relative;
  gap: var(--nano-spacing-sm);
  justify-content: center;
}
.tab[href]:focus {
  outline: var(--nano-focus-ring);
  outline-offset: -3px;
}
.tab.tab--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tab.tab--closable {
  padding-inline-end: calc(var(--padding) - var(--nano-spacing-sm));
}
.tab ::slotted(*), .tab::slotted(*) {
  display: flex;
  align-items: center;
}
.tab ::slotted(.nano-sortable__keyboard-handle) {
  position: absolute;
  inset-inline-end: -1em;
  z-index: 1;
}
.tab:not(.tab--disabled):has(.tab__label:focus-visible) {
  outline: var(--nano-focus-ring);
  outline-offset: -3px;
}

.tab__label {
  display: flex;
  flex-direction: column;
  gap: var(--nano-spacing-sm);
  align-items: center;
}
.tab__label:focus {
  outline: none;
}

.tab__close-button {
  color: var(--nano-color-primary-1200);
  --hover-color: var(--nano-color-primary-700);
}