/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-spinner-theme() {

  .el-spinner-container {
    position: relative;
  }

  el-spinner {
    background-color: el-theme(spinner-background-color);

    .spin-circle {
      border-right-color: el-theme(spinner-circle-filled-color);
      border-left-color: el-theme(spinner-circle-empty-color);
      border-top-color: el-theme(spinner-circle-empty-color);
      border-bottom-color: el-theme(spinner-circle-empty-color);
    }

    .message {
      color: el-theme(spinner-text-color);
      font-family: el-theme(spinner-text-font-family);
      font-size: el-theme(spinner-text-font-size);
      font-weight: el-theme(spinner-text-font-weight);
      line-height: el-theme(spinner-text-line-height);
    }
  }

  @each $status in el-get-statuses() {
    el-spinner.status-#{$status} .spin-circle {
      border-top-color: el-theme(spinner-#{$status}-circle-filled-color);
      border-right-color: el-theme(spinner-#{$status}-circle-empty-color);
      border-bottom-color: el-theme(spinner-#{$status}-circle-filled-color);
      border-left-color: el-theme(spinner-#{$status}-circle-filled-color);
    }
  }

  @each $size in el-get-sizes() {
    el-spinner.size-#{$size} {
      font-size: el-theme(spinner-height-#{$size});
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    40% {
      transform: rotate(230deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}