/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --loader-overlay-color: Overlay color
   * @prop --loader-overlay-opacity: Overlay opacity
   * @prop --loader-background-color: Loader background
   * @prop --loader-spinner-color: Loader color
   * @prop --loader-z-index: Loader z-index position.
   */
  --loader-overlay-color: var(--kv-neutral-4, #bebebe);
  --loader-overlay-opacity: 0.4;
  --loader-background-color: var(--kv-neutral-2, #e5e5e5);
  --loader-spinner-color: var(--kv-secondary-5, #8358fe);
  --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%;
  opacity: var(--loader-overlay-opacity);
  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);
  }
}