// @import './../../../css/scss/variables';

$red-warning: #ff0000;
$gray-very-light: #efefef;
$ui-green: #84dc88;
$green-valid: #15ce1e;
$red-light: #feefef;
$purple-mid: #98a6ff;
$purple-light: #cbd3ff;
$gray-lighter: #dddddd;
$black-100: #000000;
$white: #ffffff;
$primary: #3c53e4;
$gray-light: #a9a9a9;

$default-size: 14em;
$label-font-size: $default-size / 4;
$label-font-size-redo: $default-size * 4;

// -- mixins
@mixin size($width, $height) {
  height: $height;
  width: $width;
}

@mixin draw-progress($progress, $color, $success) {
  .pie {
    .half-circle {
      border-color: $color;
    }

    .left-side {
      transform: rotate($progress * 3.6deg);
      @if ($success == 1) {
        transition: transform 50ms ease-out;
      } @else {
        transition: transform 0.3s ease-out;
      }
    }

    @if $progress <= 50 {
      .right-side {
        display: none;
      }
    } @else {
      clip: rect(auto, auto, auto, auto);
      .right-side {
        transform: rotate(180deg);
      }
    }
  }
}

@keyframes bgswap {
  0% {
    filter: none;
  }
  50% {
    filter: invert(20%);
  }
  100% {
    filter: none;
  }
}

@keyframes textSwapOn {
  0% {
    margin-left: calc(-1 * 120vw);
  }
  100% {
    margin-left: 0;
  }
}

global-loader {
  position: absolute;
  z-index: 9000;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  display: none;

  &.show {
    display: flex;
  }

  .pie-wrapper {
    // See https://codepen.io/jo-asakura/pen/NWWrWj
    @include size($default-size, $default-size);
    float: left;
    margin: 15px;
    position: relative;

    &:nth-child(3n + 1) {
      clear: both;
    }

    .pie {
      @include size(100%, 100%);
      clip: rect(0, $default-size, $default-size, $default-size / 2);
      left: 0;
      position: absolute;
      top: 0;

      .half-circle {
        @include size(100%, 100%);
        border: ($default-size / 60) solid $purple-mid;
        border-radius: 50%;
        clip: rect(0, $default-size / 2, $default-size, 0);
        left: 0;
        position: absolute;
        top: 0;
      }
    }

    .shadow {
      @include size(100%, 100%);
      border: $default-size / 60 solid rgba(255, 255, 255, 0.05);
      border-radius: 50%;
    }

    &.style-2 {
      .label {
        background: none;
        color: #7f8c8d;

        .smaller {
          color: #bdc3c7;
        }
      }
    }

    @for $i from 1 to 101 {
      &.progress-#{$i} {
        @include draw-progress($i, $purple-mid, 0);
      }
    }

    &.progress-102 {
      @include draw-progress(100, $green-valid, 1);

      // .pie {
      //   box-shadow: inset 0 0 50px rgba(red($green-valid), green($green-valid), blue($green-valid), 0.3) ;
      //   border-radius: 50%;
      // }
    }

    &.error {
      @include draw-progress(100, red, 1);

      // .pie {
      //   box-shadow: inset 0 0 50px rgba(red(red), green(red), blue(red), 0.2) ;
      //   border-radius: 50%;
      // }
    }
  }

  img {
    animation-name: bgswap;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    margin: auto;
    display: block;
    margin-top: calc(#{$default-size} / 4);
    position: absolute;
    left: calc(50% - (#{$default-size} / 4));
    width: calc(#{$default-size} / 2);
  }

  .global-loader-text {
    color: white;
    animation-name: textSwapOn;
    animation-duration: 150ms;
    margin: 0 20vw;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
  }
}
