/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
: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
   *
  */
  --tab-list-bg-color: "transparent";
  --tab-list-indicator-color: var(--kv-primary, #005cc7);
  --tab-list-divider-color: var(--kv-neutral-5, #707070);
  position: relative;
  height: 34px;
  width: 100%;
  display: flex;
  background-color: var(--tab-list-bg-color);
}
:host::before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  border-bottom: 1px solid var(--tab-list-divider-color);
}
:host .selected-tab-indicator {
  height: 2px;
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease-out;
  background: var(--tab-list-indicator-color);
}