@mixin progress-style($color, $background-color-name, $border-color-name) {
  &::-webkit-progress-bar {
    background-color: var(--#{$background-color-name});

    @include pixel-borders(
      $corner-size: 1,
      $border-size: $border-size,
      $border-color: $border-color-name,
      $border-inset-color: false
    );
  }
  &::-webkit-progress-value {
    background-color: $color;
  }
  &::-moz-progress-bar {
    background-color: $color;
  }
  &::-ms-fill {
    background-color: $color;
    border: none;
  }
}

.nes-ui-progress {
  width: 100%;
  height: 28px;
  margin: 4px;
  color: $base-color;
  background-color: $background-color;
  -webkit-appearance: none;
  appearance: none;

  @include progress-style($color-black, 'color-white-absolute', 'color-black-absolute');

  &.nes-ui-is-rounded {
    @include rounded-corners();
  }

  &.nes-ui-is-primary {
    @include progress-style($primary-color-normal, 'color-white-absolute', 'color-black-absolute');
  }

  &.nes-ui-is-success { 
    @include progress-style($success-color-normal, 'color-white-absolute', 'color-black-absolute');
  }

  &.nes-ui-is-warning {
    @include progress-style($warning-color-normal, 'color-white-absolute', 'color-black-absolute');
  }

  &.nes-ui-is-error {
    @include progress-style($error-color-normal, 'color-white-absolute', 'color-black-absolute');
  }

}

.nes-ui-dark-mode {
  .nes-ui-progress {
    background-color: transparent;

    @include progress-style($color-white, 'color-black-absolute', 'color-white-absolute');

    &.nes-ui-is-rounded {
      @include rounded-corners();
    }

    &.nes-ui-is-primary {
      @include progress-style($primary-color-normal, 'color-black-absolute', 'color-white-absolute');
    }

    &.nes-ui-is-success { 
      @include progress-style($success-color-normal, 'color-black-absolute', 'color-white-absolute');
    }

    &.nes-ui-is-warning {
      @include progress-style($warning-color-normal, 'color-black-absolute', 'color-white-absolute');
    }

    &.nes-ui-is-error {
      @include progress-style($error-color-normal, 'color-black-absolute', 'color-white-absolute');
    }
  }
}

.nes-ui-progress {

  &.nes-ui-is-pattern {
    &::-webkit-progress-value {
      background-color: var(--color-black);
      background-image: linear-gradient(
          45deg,
          $background-color 25%,
          transparent 25%,
          transparent 75%,
          $background-color 75%,
          $background-color
        ),
        linear-gradient(
          45deg,
          $background-color 25%,
          transparent 25%,
          transparent 75%,
          $background-color 75%,
          $background-color
        );
      background-position: 0 0, 10px 10px;
      background-size: 20px 20px; 
    }

    &::-moz-progress-bar {
      background-color: var(--color-black);
      background-image: -moz-linear-gradient(
          45deg,
          $background-color 25%,
          transparent 25%,
          transparent 75%,
          $background-color 75%,
          $background-color
        ),
        -moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent
              75%, $background-color 75%, $background-color);
      background-position: 0 0, 10px 10px;
      background-size: 20px 20px;
    }

    &::-ms-fill {
      background-color: var(--color-black);
      background-image: linear-gradient(
          45deg,
          $background-color 25%,
          transparent 25%,
          transparent 75%,
          $background-color 75%,
          $background-color
        ),
        linear-gradient(
          45deg,
          $background-color 25%,
          transparent 25%,
          transparent 75%,
          $background-color 75%,
          $background-color
        );
      background-position: 0 0, 10px 10px;
      background-size: 20px 20px;
      border: none;
    }
  }
}