.o-ui {
    --o-ui-counter-divider-inherit-opacity: 0.3;
}

.o-ui-counter {
    color: var(--o-ui-alias-text-1);
}

/* HIGHLIGHT */
.o-ui-counter-highlight {
    font-variation-settings: "wght" 500;
}

/* PUSHED */
.o-ui-counter-pushed {
    margin-left: var(--o-ui-global-scale-bravo);
}

/* PUSHED | REVERSE */
.o-ui-counter-pushed.o-ui-counter-reverse {
    margin-left: 0;
    margin-right: var(--o-ui-global-scale-bravo);
}

/* DISABLED */
.o-ui-counter[disabled] {
    opacity: var(--o-ui-disabled-opacity);
}

/* COLOR | INHERIT */
.o-ui-counter-inherit-color {
    color: inherit;
}

/* BASIC */
.o-ui-counter-basic {
    display: inline-block;
}

/* DIVIDER */
.o-ui-counter-divider {
    display: inline-block;
    position: relative;
    padding-left: var(--o-ui-global-scale-bravo);
}

/* Using a before element for the border to add an opacity to the border color when it's inherited. */
.o-ui-counter-divider::before {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    left: 0;
    bottom: 0;
    height: 80%;
    border-left: 1px solid var(--o-ui-alias-border-1);
}

/* DIVIDER | REVERSE */
.o-ui-counter-divider.o-ui-counter-reverse {
    padding-left: 0;
    padding-right: var(--o-ui-global-scale-bravo);
}

.o-ui-counter-divider.o-ui-counter-reverse::before {
    border-left: 0;
    border-right: 1px solid var(--o-ui-alias-border-1);
}

/* DIVIDER | COLOR | INHERIT */
.o-ui-counter-divider.o-ui-counter-inherit-color::before {
    border-color: inherit;
    opacity: var(--o-ui-counter-divider-inherit-opacity);
}