/* Buttons, icon buttons, inputs, keyboard hints and the Chat | Explore mode switch. */

.icon {
    display: inline-block;
    flex: none;
    width: var(--icon);
    height: var(--icon);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    font: 500 var(--t-sm) / var(--lh-sm) var(--font-ui);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    cursor: pointer;
    transition: background-color var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out);
}

.btn--primary {
    color: var(--on-accent);
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn--primary:hover {
    filter: brightness(1.08);
}

.btn--ghost {
    color: var(--paper-hi);
    background-color: transparent;
    border-color: var(--rule-strong);
}

.btn--ghost:hover {
    background-color: var(--ink-3);
}

.btn--danger {
    color: var(--fault);
    background-color: transparent;
    border-color: var(--fault);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-6);
    height: var(--s-6);
    color: var(--paper-lo);
    border-radius: var(--r-1);
    transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.icon-btn:hover {
    color: var(--paper-hi);
    background-color: var(--ink-3);
}

.input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-ui);
    color: var(--paper-hi);
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
}

.input:focus {
    border-color: var(--accent);
}

.input--mono {
    font-family: var(--font-mono);
}

.kbd {
    padding: 0 var(--s-1);
    font: 400 var(--t-xs) / 1 var(--font-mono);
    color: var(--paper-lo);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
}

.mode-switch {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
}

.mode-switch__item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--paper-lo);
    text-decoration: none;
}

.mode-switch__item + .mode-switch__item {
    border-left: 1px solid var(--rule-strong);
}

.mode-switch__item:hover {
    color: var(--paper-hi);
    background-color: var(--ink-3);
}

.mode-switch__item[aria-current="page"] {
    color: var(--paper-hi);
    background-color: var(--ink-3);
}

.mode-switch__item[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: .125rem;
    background-color: var(--accent);
}

/* Touch targets: 44 px on phones and tablets (section 3.4). */
@media (max-width: 899.98px) {
    .btn,
    .icon-btn,
    .mode-switch__item {
        min-width: var(--hit);
        min-height: var(--hit);
    }
}