/** 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 --loader-overlay-color: Overlay color.
   * @prop --loader-background-color: Loader background color.
   * @prop --loader-spinner-color: Loader spinner color.
   * @prop --loader-padding: Loader padding.
   * @prop --loader-border-size: Loader border size.
   * @prop --loader-z-index: Loader z-index position.
   */
  --loader-overlay-color: var(--overlay-surface-opacity-80);
  --loader-background-color: var(--background-container-accent-purple-disabled);
  --loader-spinner-color: var(--background-container-accent-purple-strong);
  --loader-padding: 15px;
  --loader-border-size: 6px;
  --loader-z-index: 1;
}

.loader-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--loader-z-index);
}
.loader-container .overlay {
  width: 100%;
  height: 100%;
  background-color: var(--loader-overlay-color);
}
.loader-container .loader {
  height: 0;
  width: 0;
  padding: var(--loader-padding);
  border: var(--loader-border-size) solid var(--loader-background-color);
  border-right-color: var(--loader-spinner-color);
  border-radius: 50%;
  animation: loadrotate 1s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

@keyframes loadrotate {
  /* Use 0% instead for anticlockwise */
  100% {
    transform: rotate(360deg);
  }
}