#fex-button,
.fex-button,
button.fex-button,
a.fex-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fex-space-2, 8px);

    min-height: 40px;

    padding:
        0
        var(--fex-space-4, 16px);

    border:
        1px solid
        var(--fex-color-border, #e5e7eb);

    border-radius:
        var(--fex-radius-md, 8px);

    color:
        var(--fex-color-text-strong, #111827);

    background:
        var(--fex-color-surface, #ffffff);

    font-family: inherit;

    font-size:
        var(--fex-font-size-sm, 14px);

    font-weight:
        var(--fex-font-weight-semibold, 600);

    line-height: 1;

    text-decoration: none;
    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    user-select: none;

    appearance: none;
    -webkit-appearance: none;

    transition:
        color var(--fex-transition-fast, 150ms ease),
        background-color var(--fex-transition-fast, 150ms ease),
        border-color var(--fex-transition-fast, 150ms ease),
        box-shadow var(--fex-transition-fast, 150ms ease),
        transform var(--fex-transition-fast, 150ms ease);
}

#fex-button:hover,
.fex-button:hover,
button.fex-button:hover,
a.fex-button:hover {
    background:
        var(
            --fex-color-surface-hover,
            #f3f4f6
        );

    border-color:
        var(
            --fex-color-border-hover,
            #d1d5db
        );

    color:
        var(
            --fex-color-text-strong,
            #111827
        );
}

#fex-button:active,
.fex-button:active,
button.fex-button:active,
a.fex-button:active {
    transform: translateY(1px);
}

#fex-button:focus-visible,
.fex-button:focus-visible,
button.fex-button:focus-visible,
a.fex-button:focus-visible {
    outline:
        var(--fex-border-width-strong, 2px)
        solid
        var(--fex-focus-border, #2563eb);

    outline-offset: 2px;
}

#fex-button-primary,
.fex-button-primary {
    color:
        var(
            --fex-color-primary-contrast,
            #ffffff
        );

    background:
        var(
            --fex-color-primary,
            #2563eb
        );

    border-color:
        var(
            --fex-color-primary,
            #2563eb
        );
}

#fex-button-primary:hover,
.fex-button-primary:hover {
    color:
        var(
            --fex-color-primary-contrast,
            #ffffff
        );

    background:
        var(
            --fex-color-primary-hover,
            #1d4ed8
        );

    border-color:
        var(
            --fex-color-primary-hover,
            #1d4ed8
        );
}

#fex-button-secondary,
.fex-button-secondary {
    color:
        var(
            --fex-color-text-strong,
            #111827
        );

    background:
        var(
            --fex-color-surface,
            #ffffff
        );

    border-color:
        var(
            --fex-color-border,
            #d1d5db
        );
}

#fex-button-secondary:hover,
.fex-button-secondary:hover {
    background:
        var(
            --fex-color-surface-hover,
            #f3f4f6
        );

    border-color:
        var(
            --fex-color-border-hover,
            #9ca3af
        );
}

#fex-button-ghost,
.fex-button-ghost {
    color:
        var(
            --fex-color-text-muted,
            #4b5563
        );

    background: transparent;

    border-color: transparent;
}

#fex-button-ghost:hover,
.fex-button-ghost:hover {
    color:
        var(
            --fex-color-text-strong,
            #111827
        );

    background:
        var(
            --fex-color-surface-hover,
            #f3f4f6
        );

    border-color: transparent;
}

#fex-button-danger,
.fex-button-danger {
    color:
        var(
            --fex-color-danger-contrast,
            #ffffff
        );

    background:
        var(
            --fex-color-danger,
            #dc2626
        );

    border-color:
        var(
            --fex-color-danger,
            #dc2626
        );
}

#fex-button-danger:hover,
.fex-button-danger:hover {
    color:
        var(
            --fex-color-danger-contrast,
            #ffffff
        );

    background:
        var(
            --fex-color-danger-hover,
            #b91c1c
        );

    border-color:
        var(
            --fex-color-danger-hover,
            #b91c1c
        );
}

#fex-button-success,
.fex-button-success {
    color:
        var(
            --fex-color-success-contrast,
            #ffffff
        );

    background:
        var(
            --fex-color-success,
            #16a34a
        );

    border-color:
        var(
            --fex-color-success,
            #16a34a
        );
}

#fex-button-success:hover,
.fex-button-success:hover {
    color:
        var(
            --fex-color-success-contrast,
            #ffffff
        );

    background:
        var(
            --fex-color-success-hover,
            #15803d
        );

    border-color:
        var(
            --fex-color-success-hover,
            #15803d
        );
}

#fex-button-sm,
.fex-button-sm {
    min-height: 34px;

    padding:
        0
        var(--fex-space-3, 12px);

    font-size:
        var(--fex-font-size-xs, 12px);

    border-radius:
        var(--fex-radius-sm, 6px);
}

#fex-button-lg,
.fex-button-lg {
    min-height: 48px;

    padding:
        0
        var(--fex-space-5, 20px);

    font-size:
        var(--fex-font-size-base, 16px);

    border-radius:
        var(--fex-radius-lg, 10px);
}

#fex-button-icon,
.fex-button-icon {
    width: 40px;
    min-width: 40px;

    height: 40px;
    min-height: 40px;

    padding: 0;

    gap: 0;
}

#fex-button-icon.fex-button-sm,
.fex-button-icon.fex-button-sm {
    width: 34px;
    min-width: 34px;

    height: 34px;
    min-height: 34px;
}

#fex-button-icon.fex-button-lg,
.fex-button-icon.fex-button-lg {
    width: 48px;
    min-width: 48px;

    height: 48px;
    min-height: 48px;
}

#fex-button-icon-symbol,
.fex-button-icon-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    flex: 0 0 auto;
}

#fex-button-block,
.fex-button-block {
    width: 100%;
}

#fex-button-group,
.fex-button-group {
    display: inline-flex;
    align-items: center;

    gap:
        var(--fex-space-2, 8px);
}

#fex-button-group.fex-button-group-wrap,
.fex-button-group.fex-button-group-wrap {
    flex-wrap: wrap;
}

#fex-button-group.fex-button-group-stack,
.fex-button-group.fex-button-group-stack {
    flex-direction: column;
    align-items: stretch;
}

#fex-button:disabled,
.fex-button:disabled,
button.fex-button[disabled],
.fex-button.is-disabled,
.fex-button[aria-disabled="true"] {
    opacity: 0.55;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;
}

#fex-button.is-loading,
.fex-button.is-loading {
    cursor: wait;

    pointer-events: none;
}

#fex-button.is-loading::after,
.fex-button.is-loading::after {
    content: "";

    width: 14px;
    height: 14px;

    border:
        2px solid
        currentColor;

    border-right-color:
        transparent;

    border-radius: 50%;

    animation:
        fex-button-spin
        0.7s linear infinite;
}

@keyframes fex-button-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@media (max-width: 600px) {

    #fex-button-lg,
    .fex-button-lg {
        min-height: 46px;
    }

    #fex-button-group.fex-button-group-mobile-stack,
    .fex-button-group.fex-button-group-mobile-stack {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    #fex-button-group.fex-button-group-mobile-stack .fex-button,
    .fex-button-group.fex-button-group-mobile-stack .fex-button {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {

    #fex-button,
    .fex-button,
    #fex-button.is-loading::after,
    .fex-button.is-loading::after {
        transition: none !important;
        animation: none !important;
    }

}