.btn {
    /* Such that the total height of the element lands on a sensible number: https://jxnblk.github.io/formula/ */
    padding: 0.1875em 0.625em;

    font-size: inherit;
    font-family: inherit;
    line-height: 1.5;

    display: inline-block;
    margin: 0;
    vertical-align: baseline;
    appearance: none;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: var(--border-radius-md);
    box-shadow: none;

    /* Override browser default. */
    color: var(--color-fg-default);

    transition: color linear 0.1s, background-color linear 0.1s, opacity linear 0.1s;
}
.btn--sm {
    padding: 0 0.625em;
}
.btn--lg {
    padding: 0.4375em 0.625em;
}

.btn--primary {
    color: var(--color-button-primary-text);
    background-color: var(--color-button-primary-background);
    border: 1px solid var(--color-button-primary-border-hover);
    font-weight: bold;
}
.btn--primary:hover:not(:disabled) {
    color: var(--color-button-primary-text-hover);
    background-color: var(--color-button-primary-background-hover);
}

.btn--secondary {
    color: var(--color-button-secondary-text);
    background-color: var(--color-button-secondary-background);
    border: 1px solid var(--color-button-secondary-border);
    font-weight: bold;
}
.btn--secondary:hover:not(:disabled) {
    color: var(--color-button-secondary-text-hover);
    background-color: var(--color-button-secondary-background-hover);
    font-weight: bold;
}
.btn--secondary.is-toggled {
    color: var(--color-button-primary-text);
    background-color: var(--color-button-primary-background);
    border: 1px solid var(--color-button-primary-border-hover);
}

.btn--tertiary {
    color: var(--color-button-tertiary-text);
    background-color: var(--color-button-tertiary-background);
    border: 1px solid var(--color-button-tertiary-border);
}
.btn--tertiary:hover {
    color: var(--color-button-tertiary-text);
    background-color: var(--color-button-tertiary-hover-background);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid var(--gray-5);
}

.btn--clear:hover:not(:disabled) {
    color: var(--color-button-clear-text-hover);
}

.btn--icon {
    padding: var(--space-1);
    border-radius: var(--border-radius-lg);
}
.btn--icon:hover:not(:disabled) {
    background-color: var(--color-button-icon-background-hover);
}
.btn--icon.btn--sm {
    padding: 0;
}