/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import '../style/index';

@mixin uicore-progress-spinner() {
  position: relative;

  svg.spinner {
    height: 100%;
    width: 100%;

    circle.fill {
      stroke: $buic-foreground-primary;
      fill: none;
      stroke-width: 3.2;
    }

    circle.shape {
      stroke: $buic-background-5;
      fill: none;
      stroke-width: 3.2;
    }
  }

  $spinner-icon-size: 20px;

  &.success {
    svg.spinner {
      circle.fill,
      circle.shape {
        stroke: $buic-foreground-success;
      }
    }

    .icon {
      color: $buic-foreground-success;
      font-size: $spinner-icon-size;
    }

    .uicore-progress-spinner-content svg {
      fill: $buic-foreground-success;
    }
  }

  &.error {
    svg.spinner {
      circle.fill,
      circle.shape {
        stroke: $buic-foreground-alert;
      }
    }

    .icon {
      color: $buic-foreground-alert;
      font-size: $spinner-icon-size;
    }

    .uicore-progress-spinner-content svg {
      fill: $buic-foreground-alert;
    }
  }

  .uicore-progress-spinner-content {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    font-size: $uicore-font-size-small;
    user-select: none;

    svg,
    img {
      width: $uicore-icons-small;
      height: $uicore-icons-small;
      fill: $buic-foreground-body;

      &:hover {
        fill: $buic-foreground-activehover;
      }
    }
  }
}

@mixin uicore-progress-spinner-determinate() {
  svg.spinner {
    transform: rotate(-90deg);

    circle.fill {
      stroke-dasharray: 100;
      transition: stroke-dashoffset 0.5s ease-in-out;
    }
  }
}

@mixin uicore-progress-spinner-indeterminate() {
  svg.spinner {
    animation: rotate-indeterminate 2s linear infinite;

    circle.fill {
      animation: dash-indeterminate 1.5s ease-in-out infinite;
    }
  }

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

  @keyframes dash-indeterminate {
    0% {
      stroke-dasharray: 1, 100;
    }

    50% {
      stroke-dasharray: 100, 100;
      stroke-dashoffset: -25;
    }

    100% {
      stroke-dasharray: 100, 100;
      stroke-dashoffset: -100;
    }
  }
}