label {
    display: block;
}

input,
textarea,
select,
.button,
button,
input[type="file"]::file-selector-button {
    border: 1px solid var(--color-border);
    padding-block: 0.3em;
    padding-inline: 0.75em;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.8;
}

input,
textarea,
select {
    background: var(--color-bg);
    color: var(--color-fg);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--color-link-focus);
}
input:disabled,
textarea:disabled,
select:disabled {
    border-color: var(--color-border);
    background: var(--color-bg-tint);
    color: var(--color-border);
    cursor: not-allowed;
}

textarea {
    line-height: inherit;
}

.button,
button {
    --btn-color: var(--color-link);
    --btn-focus: var(--color-link-focus);
    --btn-contrast: var(--color-bg);
    --btn-internal: var(--btn-color);

    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    border-radius: 0.3em;
    border-color: var(--btn-internal);
    background: var(--btn-internal);
    color: var(--btn-contrast);
}
.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible {
    --btn-internal: color-mix(in oklch, var(--btn-color), var(--btn-focus));
    color: var(--btn-contrast);
}
.button:active,
button:active {
    --btn-internal: var(--btn-focus);
    color: var(--btn-contrast);
}
.button:disabled,
button:disabled {
    border-color: var(--btn-bg);
    background: var(--btn-bg);
    color: var(--btn-fg);
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="file"]::file-selector-button {
    background: var(--color-bg-tint);
    color: var(--color-fg);
    border: 0;
    cursor: pointer;

    margin-block: -0.3em;
    margin-inline: -0.75em 0.75em;
    border-inline-end: 1px solid var(--color-border);
}
input[type="file"]:disabled::file-selector-button {
    background: transparent;
    color: inherit;
    cursor: not-allowed;
}