/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --tab-list-bg-color: Background color of the list.
   * @prop --tab-list-indicator-color: Tab indicator bar color.
   * @prop --tab-list-divider-color: Tab divider bar color.
   * @prop --secondary-tab-list-direction: Flex direction of the secondary tab list.
   * @prop --secondary-items-align: Alignment of secondary tab items.
   */
  --tab-list-bg-color: transparent;
  --tab-list-indicator-color: var(--tab-primary-border-color-selected);
  --tab-list-divider-color: var(--tab-primary-border-color-default);
  --secondary-tab-list-direction: row;
  --secondary-items-align: center;
}
:host .primary {
  position: relative;
  width: 100%;
  display: flex;
  background-color: var(--tab-list-bg-color);
}
:host .primary::before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  border-bottom: var(--tab-primary-border-thickness-default) solid var(--tab-list-divider-color);
}
:host .primary .selected-tab-indicator {
  height: var(--tab-primary-border-thickness-strong);
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease-out;
  background: var(--tab-list-indicator-color);
}
:host .secondary {
  display: flex;
  gap: var(--spacing-xl);
  align-items: var(--secondary-items-align);
  flex-direction: var(--secondary-tab-list-direction);
}
:host kv-badge {
  --badge-height: var(--size-md);
}
:host kv-tag-status {
  --tag-status-icon-size: var(--size-md);
}