@import "../../styles/variables";
@import "../../styles/global/functions";

:host {
  display: flex;
  height: 100%;

  &.linear {
    @include theme-backgrounds("color");
    background-color: $positive;

    &:first-child {
      border-radius: 0.2em 0 0 0.2em;
    }
    &:last-child {
      border-radius: 0 0.2em 0.2em 0;
    }

    &.striped {
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
      background-size: 40px 40px;
    }

    &.animated {
      animation: progress-bar-stripes 2s linear infinite;
    }

    &.flash {
      padding: 0 calc(100% + 100px);
      background-image: linear-gradient(
        135deg,
        $silver 46%,
        $sand 48%,
        $sand 52%,
        $silver 54%
      );
      animation: progress-bar-flash 3s linear infinite;
    }
  }

  &.radial {
    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
      &[color="#{$name}"] {
        svg circle {
          stroke: $color;
        }
      }
    }
    position: absolute;

    svg {
      circle {
        stroke: $positive;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
        transition: 0.35s stroke-dashoffset;
      }

      text {
        fill: #666;
        font-family: sans-serif;
        font-size: 0.5em;
        text-anchor: middle;
      }
    }
  }
}

/* PROGRESS BAR - BASE */
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@-webkit-keyframes progress-bar-flash {
  0% { transform: translateX(calc(-50% - 100px)) }
  30% { transform: translateX(calc(-50% - 100px)) }
  60% { transform: translateX(0%) }
  100% { transform: translateX(0%) }
}
@keyframes progress-bar-flash {
  0% { transform: translateX(calc(-50% - 100px)) }
  30% { transform: translateX(calc(-50% - 100px)) }
  60% { transform: translateX(0%) }
  100% { transform: translateX(0%) }
}