@import "shared/mixins-and-vars";

// Variables for meter color
@positive: #387a26;
@neutral: #f4bc41;
@negative: #c74821;

// Mixin for customizing meter
.meter(@bg; @border-color; @width) {
    background: @bg;
    border: 1px solid @border-color;
    border-radius: 1em;
    block-size: 1em;
    display: block;
    width: @width;

    .meter-before() {
        border-radius: 1em;
        content: "";
        display: block;
        height: 100%;
        // This variable is set by the JS
        width: var(--meter-percentage);
    }

    &::before {
        .meter-before();
    }
    &[meter-state="positive"]::before {
        background: @positive;
    }
    &[meter-state="neutral"]::before {
        background: @neutral;
    }
    &[meter-state="negative"]::before {
        background: @negative;
    }

    &::-webkit-meter-bar {
        /* Hides ::-webkit-meter-bar for cross browser consistency with Safari */
        display: none;
    }

    &::-moz-meter-bar {
        /* Styles and attribute selectors for ::before must also be applied to ::moz-meter-bar to support Firefox */
        .meter-before();
    }
    &[meter-state="positive"]::-moz-meter-bar {
        background: @positive;
    }
    &[meter-state="neutral"]::-moz-meter-bar {
        background: @neutral;
    }
    &[meter-state="negative"]::-moz-meter-bar {
        background: @negative;
    }
}

.enable-custom-meter {
    .meter(#EFEFEF;#E4E4E4;120px);

    .enable__is-dark-mode & {
        .meter(@dark-mode-lightgrey; @dark-mode-white; 120px);
    }
}