@charset "UTF-8";

/* Remove focus styling only when JS is active */
.js {
    :focus {
        outline: 0;
    }
}

.tab-highlight :focus,
.tab-highlight .has-focus {
    &,
    + label {
        box-shadow: 0 0 0 2px inset var(--color-tab-highlight) !important;
    }

    &.input-icon {
        > svg {
            box-shadow: 0 0 0 2px inset var(--color-tab-highlight) !important;
        }
    }

    &::-webkit-slider-thumb {
        box-shadow:
            0 0 0 inset rgba(0,0,0,0.2),
            0 1px 2px rgba(0,0,0,0.2),
            0 0 0 3px inset var(--color-tab-highlight) !important;
    }

    &::-moz-range-thumb {
        box-shadow:
            0 0 0 inset rgba(0,0,0,0.2),
            0 1px 2px rgba(0,0,0,0.2),
            0 0 0 3px inset var(--color-tab-highlight) !important;
    }
}

/* Use when element is on dark background */
.tab-highlight .color-inverse :focus,
.tab-highlight .color-inverse .has-focus {
    &,
    + label {
        box-shadow: 0 0 0 2px inset var(--color-palette-white) !important;
    }
}
