@use "../../foundations/helpers/forward.helpers.scss" as *;

$ds-spinner__border-radius: 50%;
$ds-spinner__size--l: 40px;
$ds-spinner__size--s: 20px;
$ds-spinner__size--xs: 16px;
$ds-spinner__border-width--l: 4px;
$ds-spinner__border-width--s: 2px;
$ds-spinner__border-width--xs: 1.5px;
$ds-spinner__shadow-border-opacity: 0.2;

.ds-spinner {
  .ds-spinner__inner {
    display: block;
    border-radius: $ds-spinner__border-radius;
    animation: ds-spinner-animation 1s linear infinite;
    border-style: solid;
    border-color: transparent;
    position: relative;
    box-sizing: border-box;

    &::before {
      content: "";
      position: absolute;
      opacity: $ds-spinner__shadow-border-opacity;
      border-radius: $ds-spinner__border-radius;
      border-style: solid;
      box-sizing: border-box;
    }
  }

  &--brand .ds-spinner__inner {
    border-top-color: $ds-color-text-brand;
    &::before {
      border-color: $ds-color-text-brand;
    }
  }

  &--primary .ds-spinner__inner {
    border-top-color: $ds-color-text-primary;
    &::before {
      border-color: $ds-color-text-primary;
    }
  }

  &--secondary .ds-spinner__inner {
    border-top-color: $ds-color-text-primaryinvert;
    &::before {
      border-color: $ds-color-text-primaryinvert;
    }
  }

  &--onBrand .ds-spinner__inner {
    border-top-color: $ds-color-text-on-brand;
    &::before {
      border-color: $ds-color-text-on-brand;
    }
  }

  &--onBusiness .ds-spinner__inner {
    border-top-color: $ds-color-neutral-white;
    &::before {
      border-color: $ds-color-neutral-white;
    }
  }

  &--staticBlack .ds-spinner__inner {
    border-top-color: $ds-color-neutral-black;
    &::before {
      border-color: $ds-color-neutral-black;
    }
  }

  &--staticWhite .ds-spinner__inner {
    border-top-color: $ds-color-neutral-white;
    &::before {
      border-color: $ds-color-neutral-white;
    }
  }
}

@keyframes ds-spinner-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ds-spinner--large .ds-spinner__inner {
  &,
  &::before {
    border-width: ds-px-to-rem($ds-spinner__border-width--l);
    width: ds-px-to-rem($ds-spinner__size--l);
    height: ds-px-to-rem($ds-spinner__size--l);
  }

  &::before {
    top: -#{ds-px-to-rem($ds-spinner__border-width--l)};
    left: -#{ds-px-to-rem($ds-spinner__border-width--l)};
  }
}

.ds-spinner--small .ds-spinner__inner {
  &,
  &::before {
    border-width: ds-px-to-rem($ds-spinner__border-width--s);
    width: ds-px-to-rem($ds-spinner__size--s);
    height: ds-px-to-rem($ds-spinner__size--s);
  }

  &::before {
    top: -#{ds-px-to-rem($ds-spinner__border-width--s)};
    left: -#{ds-px-to-rem($ds-spinner__border-width--s)};
  }
}

.ds-spinner--xsmall .ds-spinner__inner {
  &,
  &::before {
    border-width: ds-px-to-rem($ds-spinner__border-width--xs);
    width: ds-px-to-rem($ds-spinner__size--xs);
    height: ds-px-to-rem($ds-spinner__size--xs);
  }

  &::before {
    top: -#{ds-px-to-rem($ds-spinner__border-width--xs)};
    left: -#{ds-px-to-rem($ds-spinner__border-width--xs)};
  }
}

.ds-force-px {
  &.ds-spinner--large .ds-spinner__inner {
    &,
    &::before {
      border-width: $ds-spinner__border-width--l;
      width: $ds-spinner__size--l;
      height: $ds-spinner__size--l;
    }

    &::before {
      top: -$ds-spinner__border-width--l;
      left: -$ds-spinner__border-width--l;
    }
  }

  &.ds-spinner--small .ds-spinner__inner {
    &,
    &::before {
      border-width: $ds-spinner__border-width--s;
      width: $ds-spinner__size--s;
      height: $ds-spinner__size--s;
    }

    &::before {
      top: -$ds-spinner__border-width--s;
      left: -$ds-spinner__border-width--s;
    }
  }

  &.ds-spinner--xsmall .ds-spinner__inner {
    &,
    &::before {
      border-width: $ds-spinner__border-width--xs;
      width: $ds-spinner__size--xs;
      height: $ds-spinner__size--xs;
    }

    &::before {
      top: -$ds-spinner__border-width--xs;
      left: -$ds-spinner__border-width--xs;
    }
  }
}