@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./spinner.common";

// Ionic Spinner
// --------------------------------------------------

:host {
  --color: #{globals.$ion-primitives-neutral-800};

  width: globals.$ion-scale-700;
  height: globals.$ion-scale-700;
}

:host(.ion-color-medium) {
  color: #{globals.ion-color(medium, contrast, $subtle: true)};
}

// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
// --------------------------------------------------

:host(.spinner-lines) line,
:host(.spinner-lines-small) line {
  stroke-width: globals.$ion-scale-150;
}

:host(.spinner-lines-sharp) line,
:host(.spinner-lines-sharp-small) line {
  stroke-width: globals.$ion-scale-100;
}

// Sizes
// --------------------------------------------------

/* Extra Small */
:host(.spinner-xsmall) {
  width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;
}

/* Small */
:host(.spinner-small) {
  width: globals.$ion-scale-800;
  height: globals.$ion-scale-800;
}

/* Medium */
:host(.spinner-medium) {
  width: globals.$ion-scale-1000;
  height: globals.$ion-scale-1000;
}

/* Large */
:host(.spinner-large) {
  width: globals.$ion-scale-1200;
  height: globals.$ion-scale-1200;
}

/* Extra Large */
:host(.spinner-xlarge) {
  width: globals.$ion-scale-1400;
  height: globals.$ion-scale-1400;
}