@import "../mixins/mixins";

@include b(time-spinner) {
  width: 100%;
  white-space: nowrap;
}

//@include b(spinner) {
//  display: inline-block;
//  vertical-align: middle;
//}
//
//@include b(spinner-inner) {
//  animation: rotate 2s linear infinite;
//  width: 50px;
//  height: 50px;
//
//  & .path {
//    stroke: #ffffff;
//    stroke-linecap: round;
//    animation: dash 1.5s ease-in-out infinite;
//  }
//}
//
//@include b(spinner) {
//  @include m(colored) {
//    @include b(spinner-inner) {
//      & .path {
//        stroke: $--color-primary;
//      }
//    }
//  }
//}

//@keyframes rotate {
//  100% {
//    transform: rotate(360deg);
//  }
//}

//@keyframes dash {
//  0% {
//    stroke-dasharray: 1, 150;
//    stroke-dashoffset: 0;
//  }
//  50% {
//    stroke-dasharray: 90, 150;
//    stroke-dashoffset: -35;
//  }
//  100% {
//    stroke-dasharray: 90, 150;
//    stroke-dashoffset: -124;
//  }
//}

@include b(spinner) {
  position: relative;
  &:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: 2px solid $--color-white;
    border-right: 2px solid transparent;
    animation: spinner .7s linear infinite;
  }
  @include when(colored) {
    &:before {
      border-top-color: $--color-primary;
    }
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}