//////////////////////////////
// THEME / ELEMENTS / PROGRESS
//////////////////////////////


@use "../variables/" as var;


// Styles for a determinate progress bar (one with a known value)
.unl progress[value] {
  appearance: none; // Reset default appearance.
  border: none; // Remove default border in Firefox.
}


// Progress bar (background/container) -- WebKit only -- and value
.unl progress[value]::-webkit-progress-bar,
.unl progress[value]::-webkit-progress-value {
  border-radius: var.$pill;
}


// Progress bar (background/container) -- WebKit only
.unl progress[value]::-webkit-progress-bar {
  background-color: var(--bg-light-gray);
}


// Progress value -- WebKit
.unl progress[value]::-webkit-progress-value {
  background-color: var.$blue;
}


// Progress value -- Firefox
.unl progress[value]::-moz-progress-bar {
  background-color: var.$blue;
}
