:root {
    --x-o-size: 24px;
    --x-boldness: 2px;
    --x-o-height: var(--x-o-size);
    --o-padding: 1px;
    --o-padding-3: 3px;
    --o-padding-5: 5px;
    --o-outline-width: var(--o-outline-width-5);
    --o-outline-width-3: 3px;
    --o-outline-width-5: 5px;
}

:is(.x, .o) {
    --o-padding: 0px;
    --o-padding-3: 3px;
    --b-color: inherit;
    --border-radius: 50%;
    --_outline-width: 5px;
    height: var(--x-o-height);
    position: relative;
}

/* a.o is for icon-only buttons that have a circular background on hover */
:is(body, #a #b) :is(.x, .o) {
    outline: solid var(--_outline-width) var(--b-color);
    outline-offset: -1px;
    background: var(--b-color);
    cursor: pointer;
    overflow: hidden;
    padding: var(--o-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
    text-decoration: none;
    box-shadow: none;
    min-height: var(--min-clickable-size-1);
    width: unset;
    min-width: unset;
    border: none;
}

body .o:before {
    margin: 0;
}

:is(body, #a #b) :is(.x, .o):not(:disabled):is(:hover, :focus) {
    --b-color: var(--button-hover-background-color);
}

:is(body, #a #b) :is(.x, .o):not(:disabled):active {
    --b-color: var(--button-pressed-background-color);
}

body .x:hover:after, body .x:hover:before {
    background: #223a65;
    opacity: 1;
}

body .x:before, body .x:after {
    background: var(--text-color);
    content: '';
    opacity: .8;
    position: absolute;
    width: calc(100% - 2px - var(--o-padding) * 2);
    height: var(--x-boldness);
}

body .x:before {
    transform: rotate(45deg);
}

body .x:after {
    transform: rotate(-45deg);
}

button.o,
.playground button.o {
    background: none;
}

.o-icon-buttons {
    gap: var(--gap10);
}