/*** Meter formats ***/

/* Common */
meter {
    -moz-appearance: none;

    width: 30vw;
    min-width: 4em;
    max-width: 15em;
    height: 0.75em;
    padding: 0;
    vertical-align: baseline;
    margin-top: 3px;
    /* Outer background for Mozilla */
    background: none;
    background-color: whitesmoke;
}

/* Webkit */

meter::-webkit-meter-bar {
    /* Outer background for Webkit */
    background: none;
    background-color: whitesmoke;
    height: 0.75em;
    border-radius: 0px;
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value
{
    /* Inner shadow for Webkit */
    border: solid 1px black;
}

meter.coverage-none::-webkit-meter-optimum-value,
meter.coverage-low::-webkit-meter-optimum-value
{
    background: var(--low_color);
}

meter.coverage-medium::-webkit-meter-optimum-value
{
    background: var(--medium_color);
}

meter.coverage-high::-webkit-meter-optimum-value
{
    background: var(--high_color);
}

/* Mozilla */

meter::-moz-meter-bar
{
    box-sizing: border-box;
}

meter:-moz-meter-optimum::-moz-meter-bar,
meter:-moz-meter-sub-optimum::-moz-meter-bar,
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar
{
    /* Inner shadow for Mozilla */
    border: solid 1px black;
}

meter.coverage-none:-moz-meter-optimum::-moz-meter-bar,
meter.coverage-low:-moz-meter-optimum::-moz-meter-bar
{
    background: var(--low_color);
}

meter.coverage-medium:-moz-meter-optimum::-moz-meter-bar
{
    background: var(--medium_color);
}

meter.coverage-high:-moz-meter-optimum::-moz-meter-bar
{
    background: var(--high_color);
}

/*** End of Meter formats ***/