@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.progress {
  --color-fg: var(--theme-color-primary);
  --color-bg: var(--theme-color-primary-dimmed-02);
  --bg-opacity: 1;

  position: relative;
  width: 150px;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  margin: 0 -1;

  @media(max-width: 767px) {
    width: 120px;
    height: 12px;
  }

  &::before {
    content: '';
    @include full-size;
    background-color: var(--color-bg);
    opacity: var(--bg-opacity);
  }

  .bar {
    position: absolute;
    display: block;
    height: 100%;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: var(--color-fg);
  }
}