.button {
    --button-background: var(--ds-background-neutral-subtle, #00000000);
    --button-background-hovered: var(--ds-background-neutral-subtle-hovered, #0515240f);
    --button-background-pressed: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    --button-background-disabled: transparent;
    --button-border-color: var(--ds-border, #0b120e24);
    --button-border-color-disabled: var(--ds-border-disabled, #0515240f);
    --button-color: var(--ds-text-subtle, #505258);

    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    column-gap: var(--ds-space-050, 4px);
    inline-size: auto;
    max-inline-size: 100%;
    block-size: 2rem;
    margin: var(--ds-space-0, 0);
    padding-block: var(--ds-space-075, 6px);
    padding-inline: var(--ds-space-150, 12px);
    border-width: 0;
    border-radius: var(--ds-radius-medium, 6px);
    background-color: var(--button-background);
    font: var(--ds-font-body, normal 400 14px/20px sans-serif);
    font-weight: var(--ds-font-weight-medium, 500);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none;
    color: var(--button-color);
    cursor: pointer;
    box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--button-border-color);
    transition: background 0.1s ease-out;

    &:is(:visited, :hover, :focus, :active) {
        text-decoration: none;
        color: var(--button-color);
    }

    &:hover {
        background-color: var(--button-background-hovered);
    }

    &:active {
        background-color: var(--button-background-pressed);
    }

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

    &.button-subtle {
        --button-border-color: transparent;
        --button-border-color-disabled: transparent;
    }

    &.button-primary {
        --button-background: var(--ds-background-brand-bold, #1868db);
        --button-background-hovered: var(--ds-background-brand-bold-hovered, #1558bc);
        --button-background-pressed: var(--ds-background-brand-bold-pressed, #144794);
        --button-background-disabled: var(--ds-background-disabled, #0515240f);
        --button-border-color: transparent;
        --button-border-color-disabled: transparent;
        --button-color: var(--ds-text-inverse, #fff);
    }

    &.button-danger {
        --button-background: var(--ds-background-danger-bold, #c9372c);
        --button-background-hovered: var(--ds-background-danger-bold-hovered, #ae2e24);
        --button-background-pressed: var(--ds-background-danger-bold-pressed, #872821);
        --button-background-disabled: var(--ds-background-disabled, #0515240f);
        --button-border-color: transparent;
        --button-border-color-disabled: transparent;
        --button-color: var(--ds-text-inverse, #fff);
    }

    &.button-warning {
        --button-background: var(--ds-background-warning-bold, #fbc828);
        --button-background-hovered: var(--ds-background-warning-bold-hovered, #fca700);
        --button-background-pressed: var(--ds-background-warning-bold-pressed, #f68909);
        --button-background-disabled: var(--ds-background-disabled, #0515240f);
        --button-border-color: transparent;
        --button-border-color-disabled: transparent;
        --button-color: var(--ds-text-warning-inverse, #292a2e);
    }

    &.button-discovery {
        --button-background: var(--ds-background-discovery-bold, #964ac0);
        --button-background-hovered: var(--ds-background-discovery-bold-hovered, #803fa5);
        --button-background-pressed: var(--ds-background-discovery-bold-pressed, #673286);
        --button-background-disabled: var(--ds-background-disabled, #0515240f);
        --button-border-color: transparent;
        --button-border-color-disabled: transparent;
        --button-color: var(--ds-text-inverse, #fff);
    }

    &.button-selected {
        --button-background: var(--ds-background-selected, #e9f2fe);
        --button-background-hovered: var(--ds-background-selected-hovered, #cfe1fd);
        --button-background-pressed: var(--ds-background-selected-pressed, #8fb8f6);
        --button-background-disabled: var(--ds-background-disabled, #0515240f);
        --button-border-color: var(--ds-border-selected, #1868db);
        --button-border-color-disabled: transparent;
        --button-color: var(--ds-text-selected, #1868db);
    }

    &.button-compact {
        block-size: 1.5rem;
        padding-block: var(--ds-space-025, 2px);
        border-radius: var(--ds-radius-small, 4px);
    }

    &.button-icon {
        align-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        padding: var(--ds-space-0, 0);

        &.button-compact {
            inline-size: 1.5rem;
            block-size: 1.5rem;
        }
    }

    &.button-circle {
        border-radius: var(--ds-radius-full, 9999px);
    }

    &.button-full-width {
        inline-size: 100%;
    }

    &:disabled {
        --button-background: var(--button-background-disabled);
        --button-background-hovered: var(--button-background-disabled);
        --button-background-pressed: var(--button-background-disabled);
        --button-border-color: var(--button-border-color-disabled);
        --button-color: var(--ds-text-disabled, #080f214a);

        cursor: not-allowed;
    }
}