.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    margin: 0;
    padding-block: 6px;
    padding-inline: 12px;
    border: 0;
    border-radius: 6px;
    background-color: var(--ds-background-neutral-subtle, #00000000);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ds-text-subtle, #505258);
    cursor: pointer;
    transition: background-color 0.15s cubic-bezier(0.4, 1, 0.6, 1);

    &:hover {
        background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &:active {
        background-color: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    }

    &:focus {
        outline: none;
        color: var(--ds-text-subtle, #505258);
    }

    &:focus-visible {
        outline: 2px solid var(--ds-border-focused, #2684ff);
        outline-offset: 2px;
    }

    &.primary {
        background-color: var(--ds-background-brand-bold, #1868db);
        color: var(--ds-text-inverse, #fff);

        &:hover {
            background-color: var(--ds-background-brand-bold-hovered, #1558bc);
        }

        &:active {
            background-color: var(--ds-background-brand-bold-pressed, #144794);
        }

        &:focus {
            color: var(--ds-text-inverse, #fff);
        }
    }

    &.danger {
        background-color: var(--ds-background-danger-bold, #c9372c);
        color: var(--ds-text-inverse, #fff);

        &:hover {
            background-color: var(--ds-background-danger-bold-hovered, #ae2e24);
        }

        &:active {
            background-color: var(--ds-background-danger-bold-pressed, #872821);
        }

        &:focus {
            color: var(--ds-text-inverse, #fff);
        }
    }

    &:disabled {
        background-color: var(--ds-background-disabled, #0515240f);
        color: var(--ds-text-disabled, #080f214a);
        cursor: not-allowed;
    }
}