.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 .7em;
    text-align: center;
    --pad-h: 1.1em;
    --pad-v: .7em;
    padding: var(--pad-v) var(--pad-h);
    --br: .4em;
    border-radius: var(--br);
    background: var(--main-color);
    color: var(--over-main);
    --o-off: -3px;
    line-height: normal;
}

.btn.hollow {
    background-color: unset;
    --bw: 1px;
    border: var(--bw) solid var(--main-color);
    padding: calc(var(--pad-v) - var(--bw)) calc(var(--pad-h) - var(--bw));
    --main-color: currentColor;
    color: var(--main-color);
    --o-off: -4px;
}

.btn.primary {
    --main-color: var(--color-primary);
    --over-main: var(--color-on-primary);
}

.btn.primary::selection {
    --main-color: var(--color-on-primary);
    --over-main: var(--color-primary);
}

.btn.success {
    --main-color: green;
    --over-main: var(--color-on-primary);
}

.btn.error {
    --main-color: red;
    --over-main: var(--color-on-primary);
}

.btn:disabled {
    opacity: .7;
}

.btn.t {
    position: relative;
    --h-opacity: 0;
    --highlight: rgba(0, 0, 0, var(--h-opacity));
}

.btn.t::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--br);
    background-color: var(--highlight);
    transition: background-color .2s;
}

.btn.t:is(:hover, :focus) {
    --h-opacity: 0.1;
}

.btn.t:focus {
    --o-width: 0;
}

@media (prefers-color-scheme: dark) {
    .btn.t {
        --highlight: rgba(255, 255, 255, var(--h-opacity));
    }
}