Progress Bar

.progress-bar {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 43px;
  border: 2px solid currentColor;
  border-radius: 3px;
  vertical-align: bottom;

  > progress {
    // Resetting User Agents
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;

    // Structural Styles
    padding: 0;
    width: 100%;
    height: 100%;

    // Visual Styles
    
    color: hsla(var(--base-hsl), 1);
    
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    
    &[value]::-webkit-progress-bar { background-color: hsla(var(--white-hsl), 1); }
    &[value]::-webkit-progress-value { background-color: hsla(var(--base-hsl), .1); }

    &:before,
    &:after,
    label {
      position: absolute;
      top: 6px;
    }


    &:before {
      content: '%';
      right: 16px;
    }

    &:after {
      content: attr(value);
      right: 30px;
    }
  }

  > label { 
    position: absolute;
    top: 6px;
    left: 16px;
  }
}