$spinner-diameter: 25px;
$mini-spinner-diameter: 15px;
$sm-spinner-diameter: 20px;
$lg-spinner-diameter: 30px;
$xl-spinner-diameter: 35px;

.spinner {
  position: relative;
  display: flex;
  width: calc($spinner-diameter + 15px);
  height: calc($spinner-diameter + 15px);

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: $spinner-diameter;
    height: $spinner-diameter;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: $white;
    border-radius: 50%;
    animation: loading-spinner 1s ease infinite;
  }

  @each $color, $value in $colors {
    &.#{$color}::after {
      border-top-color: $value;
    }
  }

  &.mini {
    width: calc($mini-spinner-diameter + 15px);;
    height: calc($mini-spinner-diameter + 15px);;

    &::after {
      width: $mini-spinner-diameter;
      height: $mini-spinner-diameter;
    }
  }

  &.sm {
    width: calc($sm-spinner-diameter + 15px);;
    height: calc($sm-spinner-diameter + 15px);;

    &::after {
      width: $sm-spinner-diameter;
      height: $sm-spinner-diameter;
    }
  }

  &.lg {
    width: calc($lg-spinner-diameter + 15px);;
    height: calc($lg-spinner-diameter + 15px);;

    &::after {
      width: $lg-spinner-diameter;
      height: $lg-spinner-diameter;
    }
  }

  &.xl {
    width: calc($xl-spinner-diameter + 15px);;
    height: calc($xl-spinner-diameter + 15px);;

    &::after {
      width: $xl-spinner-diameter;
      height: $xl-spinner-diameter;
    }
  }
}