// Themes
@import './clinical-lowlight-theme/ProgressBar.module';
@import './orion-fusion-theme/ProgressBar.module';

:local {
  .progress-bar {
    border-radius: var(--terra-progress-bar-border-radius, 0.5em);
    display: block;
    height: var(--terra-progress-bar-height, 0.8rem);
    overflow: hidden;
    width: 100%;

    &:focus {
      outline: none;
    }

    &[value] {
      appearance: none;
      border: 0; // Remove Firefox and Opera border

      // To fix background color to the proper shade of Grey in Safari
      &::-webkit-progress-bar {
        border-radius: 0;
      }

      &::-webkit-progress-value {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
    }

    &[value='100'],
    &[value='0'] {
      &::-webkit-progress-value {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
  }

  .default-color {
    background-color: var(--terra-progress-bar-background-color, #d3d4d5);
    color: var(--terra-progress-bar-progress-background-color, #0092e0);

    // To fix background color to the proper shade of Grey in Safari
    &::-webkit-progress-bar {
      background-color: var(--terra-progress-bar-background-color, #d3d4d5);
    }

    &::-webkit-progress-value {
      background-color: var(--terra-progress-bar-progress-background-color, #0092e0);
    }

    &::-moz-progress-bar {
      background-color: var(--terra-progress-bar-progress-background-color, #0092e0);
    }

    &::-ms-fill {
      background-color: var(--terra-progress-bar-progress-background-color, #0092e0);
    }
  }

  // Firefox styles must be entirely separate as it doesn't work well with WebKit styles
  @-moz-document url-prefix('') {
    .progress-bar {
      border-radius: 0.5em;
      overflow: hidden;

      &:focus {
        outline: none;
      }

      &[value]::-moz-progress-bar {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }

      &[value='0']::-moz-progress-bar,
      &[value='100']::-moz-progress-bar {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
  }

  //Height specific styles
  .tiny {
    height: var(--terra-progress-bar-tiny-height, 0.5rem);
  }

  .small {
    height: var(--terra-progress-bar-small-height, 0.8rem);
  }

  .medium {
    height: var(--terra-progress-bar-medium-height, 1rem);
  }

  .large {
    height: var(--terra-progress-bar-large-height, 1.4rem);
  }

  .huge {
    height: var(--terra-progress-bar-huge-height, 1.7rem);
  }
}