.o-ui {
    --o-ui-dot-color: var(--o-ui-alias-background-2);
}

.o-ui-dot {
    display: inline-flex;
    align-items: center;
    color: var(--o-ui-alias-text-1);
}

.o-ui-dot:before {
    content: "";
    display: inline-block;
    border-radius: var(--o-ui-shape-pill);
    background-color: var(--o-ui-dot-color);
    min-width: 0.5em;
    min-height: 0.5em;
    font-size: var(--o-ui-global-type-scale-7);
}

/* CONTENT | LABEL */
.o-ui-dot-has-label.o-ui-dot:before {
    margin-right: var(--o-ui-global-scale-bravo);
}

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