@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$loader-color: map-get($denali-brand-colors,"300") !default;
$loader-color-inverse: map-get($denali-grey-colors,"100") !default;

@mixin loader-default {
  .loader {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation-name: loaderDefault;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
    animation-duration: .9s;
    animation-delay: 0.2s;
    left: 14px;
    top: -10px;
    margin: 0px;

    &:before,
    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      animation-name: loaderDefault;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease;
      animation-duration: .9s;
    }

    &:before {
      left: 14px;
      animation-delay: 0.3s;
    }

    &:after {
      right: 14px;
      animation-delay: 0.1s;
    }

    &--inverse,
    &.is-inverse {
      animation-name: loaderInverse;

      &:before,
      &:after {
        animation-name: loaderInverse;
      }
    }

    &--button {
      left: 0px;
    }
  }

  .button {
    &.is-solid,
    &.is-danger {
      .loader {
        animation-name: loaderInverse;

        &:before,
        &:after {
          animation-name: loaderInverse;
        }
      }
    }
  }

  @keyframes loaderDefault {
    0% {
      box-shadow: 0 10px 0 -10px $loader-color;
      opacity: 0;
    }

    50% {
      box-shadow: 0 10px 0 $loader-color;
      opacity: .75;
    }

    100% {
      box-shadow: 0 10px 0 $loader-color;
      opacity: 1;
    }
  }

  @keyframes loaderInverse {
    0% {
      box-shadow: 0 10px 0 -10px $loader-color-inverse;
      opacity: 0;
    }

    50% {
      box-shadow: 0 10px 0 $loader-color-inverse;
      opacity: .75;
    }

    100% {
      box-shadow: 0 10px 0 $loader-color-inverse;
      opacity: 1;
    }
  }
}

@mixin loader-theme {
  .loader {
    animation-name: loaderThemeDefault;

    &:before,
    &:after {
      animation-name: loaderThemeDefault;
    }

    &--inverse,
    &.is-inverse {
      animation-name: loaderThemeInverse;

      &:before,
      &:after {
        animation-name: loaderThemeInverse;
      }
    }
  }

  .button {
    &.is-solid,
    &.is-danger {
      .loader {
        animation-name: loaderThemeInverse;

        &:before,
        &:after {
          animation-name: loaderThemeInverse;
        }
      }
    }
  }


  @keyframes loaderThemeDefault {
    0% {
      box-shadow: 0 10px 0 -10px $loader-color;
      opacity: 0;
    }

    50% {
      box-shadow: 0 10px 0 $loader-color;
      opacity: .75;
    }

    100% {
      box-shadow: 0 10px 0 $loader-color;
      opacity: 1;
    }
  }

  @keyframes loaderThemeInverse {
    0% {
      box-shadow: 0 10px 0 -10px $loader-color-inverse;
      opacity: 0;
    }

    50% {
      box-shadow: 0 10px 0 $loader-color-inverse;
      opacity: .75;
    }

    100% {
      box-shadow: 0 10px 0 $loader-color-inverse;
      opacity: 1;
    }
  }
}