@use "sass:color";
@use "./../../variables" as *;

progress {
  --input-padding-x: 1px;
  --input-padding-y: 1px;
  --input-small-padding-x: 1px;
  --input-small-padding-y: 1px;
  --input-large-padding-x: 1px;
  --input-large-padding-y: 1px;
  --input-height: var(--spacer);
  --input-desktop-height: var(--spacer);

  background-color: transparent;
  border-radius: var(--input-round-border-radius);
  overflow: hidden;

  &::-webkit-progress-bar {
    background-color: color-mix(in oklab, var(--html-color), #fff 95%);
  }

  &::-webkit-progress-value {
    background-color: var(--input-detail-background);
    border-radius: var(--input-round-border-radius);
  }

  &::-moz-progress-bar {
    background-color: color-mix(in oklab, var(--html-color), #fff 95%);
  }

  &::-moz-progress-value {
    background-color: var(--input-detail-background);
    border-radius: var(--input-round-border-radius);
  }

  @each $key, $value in $theme-colors {
    &.input--#{$key} {
      &::-webkit-progress-bar {
        background-color: hsl(from var(--#{$key}) h s l / 5%);
      }

      &::-moz-progress-bar {
        background-color: hsl(from var(--#{$key}) h s l / 5%);
      }

      &::-webkit-progress-value {
        background-color: var(--#{$key});
      }

      &::-moz-progress-value {
        background-color: var(--#{$key});
      }
    }
  }
}