/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

:root {
  --pending-spinner-small-size: 14px;
  --pending-spinner-size: 20px;
  --pending-spinner-large-size: 26px;
  --pending-spinner-circle-color-default: #a8abb5;
  --pending-spinner-backcircle-color: color-mod(
    var(--pending-spinner-circle-color-default) alpha(15%)
  );
  --pending-spinner-circle-color-primary: var(--color-primary);
  --pending-spinner-circle-color-success: var(--color-success);
  --pending-spinner-circle-color-info: var(--color-info);
  --pending-spinner-circle-color-warning: var(--color-warning);
  --pending-spinner-circle-color-danger: var(--color-danger);
  --pending-spinner-animation-duration: 1.5s;
}

/* Keyframes */
@keyframes spin {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 30;
  }

  50% {
    stroke-dashoffset: 260;
    transform: rotate(540deg);
  }

  100% {
    transform: rotate(720deg);
    stroke-dashoffset: 30;
  }
}

/* Reset */
.container {
  all: initial;
}

/* Styles */
.container {
  display: inline-flex;
  align-self: center;
  vertical-align: middle;
  transform: rotate(-90deg);
}

.circleBackground {
  stroke: var(--pending-spinner-backcircle-color);
}

.circle {
  transform-origin: center center;
  animation: spin var(--pending-spinner-animation-duration) linear infinite;
  stroke: var(--pending-spinner-circle-color-default);
  transform: translateZ(0);
}

/* Sizes */
.small {
  width: var(--pending-spinner-small-size);
  height: var(--pending-spinner-small-size);
}

.normal {
  width: var(--pending-spinner-size);
  height: var(--pending-spinner-size);
}

.large {
  width: var(--pending-spinner-large-size);
  height: var(--pending-spinner-large-size);
}

/* Themes */
.primary {
  & .circle {
    stroke: var(--pending-spinner-circle-color-primary);
  }
}

.success {
  & .circle {
    stroke: var(--pending-spinner-circle-color-success);
  }
}

.info {
  & .circle {
    stroke: var(--pending-spinner-circle-color-info);
  }
}

.warning {
  & .circle {
    stroke: var(--pending-spinner-circle-color-warning);
  }
}

.danger {
  & .circle {
    stroke: var(--pending-spinner-circle-color-danger);
  }
}