@layer block {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-3);
        font-family: var(--font-ui);
        font-size: var(--text-ui-button);
        font-weight: var(--weight-button);
        line-height: var(--leading-button);
        border-radius: var(--radius-full);
        border: 1.5px solid transparent;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

        &.button--primary {
            background: var(--color-accent);
            color: var(--color-accent-on);
            border-color: var(--color-accent);

            &:hover {
                background: var(--color-secondary);
                border-color: var(--color-secondary);
                color: var(--color-on-secondary);
            }
        }

        &.button--secondary {
            background: transparent;
            /* Not --color-accent: the brand lime on unfilled paper is 1.4:1,
               which had "Prihlásiť sa cez Google" sitting on the login page as
               a label you had to guess at. --color-secondary is the same hue
               at a readable weight, and it flips with the theme. The ring
               stays brand lime — that is the button's shape, not its text. */
            color: var(--color-secondary);
            border-color: var(--color-accent);

            &:hover {
                background: var(--color-secondary-fixed);
                color: var(--color-on-secondary-fixed);
            }
        }

        &.button--ghost {
            background: transparent;
            color: var(--color-text-muted);
            border-color: transparent;

            &:hover {
                background: var(--color-bg-subtle);
                color: var(--color-text);
            }
        }

        &.button--sm {
            padding: calc(var(--space-1) * 0.5) var(--space-2);
            font-size: var(--text-label-caps);
        }
    }
}