button, .btn, .shortcut {
    margin: 0;
    font-family: inherit;
    text-transform: none;
    -webkit-appearance: button;
    outline: 0;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;

    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    cursor: pointer;
    min-height: 38px;
    border: none;

    --btn-bg-color: var(--fnd-accent-1-color);
    --btn-fg-color: var(--fnd-on-accent-1-color);
    --btn-bg-hover-color: light-dark(color-mix(in lab, black 5%, var(--btn-bg-color)), color-mix(in lab, white 5%, var(--btn-bg-color)));
    --btn-fg-hover-color: var(--btn-fg-color);
    color: var(--btn-fg-color) !important;
    background-color: var(--btn-bg-color) !important;
    box-shadow: none !important;
}

button, .btn {
    padding: 10px 24px 8px 24px;
    border-radius: var(--shape-s);
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    line-height: 0.875rem !important;
    letter-spacing: 0.0125rem;
}

.shortcut {
    width: auto;
    padding: 6px 20px 4px 20px;
    border-radius: var(--shape-m);
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

button:disabled, .btn:disabled, .shortcut:disabled {
    opacity: 40%;
    cursor: unset !important;
}

button :where(i, span, p), .btn :where(i, span, p), .shortcut :where(i, span, p) {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 0.875rem;
    letter-spacing: 0.0125rem;

    color: var(--btn-fg-color);

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):hover, .btn:not(:disabled):hover, .shortcut:not(:disabled):hover {
        color: var(--btn-fg-hover-color) !important;
        background-color: var(--btn-bg-hover-color) !important;
    }

    button:not(:disabled):hover :where(i, span, p), .btn:not(:disabled):hover :where(i, span, p), .shortcut:not(:disabled):hover :where(i, span, p) {
        color: var(--btn-fg-hover-color);
    }
}

.clickable, .cursor-pointer {
    cursor: pointer;
}
.clickable, .clickable :where(i, span, p), .cursor-pointer, .cursor-pointer :where(i, span, p) {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .clickable:not(:disabled):hover {
        background-color: light-dark(color-mix(in lab, black 5%, var(--fnd-neutral-1-color)), color-mix(in lab, white 5%, var(--fnd-neutral-1-color))) !important;
    }
}

.scale-on-hover-1_1 {
    scale: 1;
    transition: scale .15s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
    .scale-on-hover-1_1:not(:disabled):hover {
        scale: 1.1;
        transition: scale .15s ease-in-out;
    }
}