@use "../palette/material_color";
@use "../utilities/convert";

.md-typeset {

  /* Progress Bars */
  .progress-label {
    position: absolute;
    width: 100%;
    margin: 0;
    color: var(--md-text-color);
    font-weight: 700;
    line-height: convert.px2rem(28px);
    white-space: nowrap;
    text-align: center;
    text-shadow:
      convert.px2em(-1px) convert.px2em(-1px) convert.px2em(6px) var(--md-default-bg-color--light),
      convert.px2em(1px) convert.px2em(-1px) convert.px2em(6px) var(--md-default-bg-color--light),
      convert.px2em(-1px) convert.px2em(1px) convert.px2em(6px) var(--md-default-bg-color--light),
      convert.px2em(1px) convert.px2em(1px) convert.px2em(6px) var(--md-default-bg-color--light);
  }

  .progress-bar {
    float: left;
    height: convert.px2rem(24px);
    background-color: material_color.$clr-blue-a400;
  }

  /* Stripe animation */
  .candystripe-animate {
    .progress-bar{
      animation: animate-stripes 3s linear infinite;
    }
  }

  .progress {
    position: relative;
    display: block;
    width: 100%;
    height: convert.px2rem(24px);
    margin: convert.px2rem(10px) 0;
    background-color: var(--md-default-fg-color--lightest);

    &.thin {
      height: convert.px2rem(8px);
      margin-top: convert.px2rem(18px);

      .progress-label {
        margin-top: convert.px2rem(-8px);
      }

      .progress-bar {
        height: convert.px2rem(8px);
      }
    }

    &.candystripe .progress-bar {
      background-image:
        linear-gradient(
          135deg,
          var(--md-progress-stripe) 27%,
          transparent 27%,
          transparent 52%,
          var(--md-progress-stripe) 52%,
          var(--md-progress-stripe) 77%,
          transparent 77%,
          transparent
        );
      background-size: convert.px2rem(40px) convert.px2rem(40px);
    }
  }

  @each $percent, $color in (
    "100": var(--md-progress-100),
    "80": var(--md-progress-80),
    "60": var(--md-progress-60),
    "40": var(--md-progress-40),
    "20": var(--md-progress-20),
    "0": var(--md-progress-0)
  ) {
    .progress-#{$percent}plus {
      .progress-bar {
        background-color: $color;
      }
    }
  }

  @keyframes animate-stripes {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: convert.px2rem(120px) 0;
    }
  }
}
