@import 'variables';

.magnet-loader {
  position: relative;

  &--small {
    width: 16px;
    height: 16px;
  }

  &--medium {
    width: 20px;
    height: 20px;
  }

  &--large {
    width: 24px;
    height: 24px;
  }

  &--xlarge {
    width: 28px;
    height: 28px;
  }

  &__track {
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    opacity: 0.2;

    .magnet-loader--current & {
      border-color: currentColor;
    }

    .magnet-loader--dark & {
      border-color: var(--jfv-navy-700);
    }

    .magnet-loader--light & {
      border-color: var(--jfv-white);
    }
  }

  &__spinner {
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: magnet-spin 0.7s linear infinite;

    .magnet-loader--current & {
      border-right-color: currentColor;
    }

    .magnet-loader--dark & {
      border-right-color: var(--jfv-navy-700);
    }

    .magnet-loader--light & {
      border-right-color: var(--jfv-white);
    }
  }
}

@keyframes magnet-spin {
  to {
    transform: rotate(360deg);
  }
}