/* Modern Microsys button surface */

:root {
    --ms-btn-radius: 0.78rem;
    --ms-btn-ink: #111827;
    --ms-btn-border: rgba(15, 23, 42, 0.14);
    --ms-btn-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    --ms-btn-shadow-hover: 0 12px 26px rgba(15, 23, 42, 0.13);
    --ms-btn-secondary-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    --ms-btn-success-bg: linear-gradient(180deg, #bbf7d0 0%, #86efac 100%);
    --ms-btn-info-bg: linear-gradient(180deg, #bae6fd 0%, #7dd3fc 100%);
    --ms-btn-warning-bg: linear-gradient(180deg, #fde68a 0%, #facc15 100%);
    --ms-btn-danger-bg: linear-gradient(180deg, #fecaca 0%, #fda4af 100%);
}

.btn {
    border-radius: var(--ms-btn-radius);
    font-weight: 700;
    padding: 0.52rem 1.08rem;
    border: 1px solid var(--ms-btn-border) !important;
    box-shadow: var(--ms-btn-shadow);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
    outline: none !important;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--ms-btn-shadow-hover);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.1) !important;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(var(--primal-rgb, 71, 85, 105), 0.28), var(--ms-btn-shadow) !important;
}

.btn:disabled,
.btn.disabled {
    transform: none;
    box-shadow: none;
    opacity: 0.62;
}

.btn-primary {
    background: linear-gradient(180deg, var(--primal) 0%, var(--primal_dark) 100%) !important;
    border-color: rgba(var(--primal-rgb, 71, 85, 105), 0.32) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
}

:root.theme-mono .btn-primary > .bi,
:root.theme-dark .btn-primary > .bi,
:root.theme-retro .btn-primary > .bi,
:root.theme-gothic .btn-primary > .bi,
:root.theme-neon .btn-primary > .bi,
:root.theme-prism .btn-primary > .bi,
.theme-mono .btn-primary > .bi,
.theme-dark .btn-primary > .bi,
.theme-retro .btn-primary > .bi,
.theme-gothic .btn-primary > .bi,
.theme-neon .btn-primary > .bi,
.theme-prism .btn-primary > .bi,
.btn-primary > .bi {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: currentColor !important;
}

.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-light {
    color: var(--ms-btn-ink) !important;
}

.btn-secondary {
    background: var(--ms-btn-secondary-bg) !important;
}

.btn-success {
    background: var(--ms-btn-success-bg) !important;
}

.btn-info {
    background: var(--ms-btn-info-bg) !important;
}

.btn-warning {
    background: var(--ms-btn-warning-bg) !important;
}

.btn-danger {
    background: var(--ms-btn-danger-bg) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-light,
.btn-outline-dark {
    background: rgba(255, 255, 255, 0.52) !important;
    border-color: rgba(var(--primal-rgb, 71, 85, 105), 0.22) !important;
    color: var(--title, #111827) !important;
}

.btn-outline-primary {
    background:
        linear-gradient(180deg, rgba(var(--primal-rgb, 71, 85, 105), 0.08) 0%, rgba(var(--primal-rgb, 71, 85, 105), 0.035) 100%),
        color-mix(in srgb, var(--hbody, #ffffff) 78%, transparent) !important;
    border-color: rgba(var(--primal-rgb, 71, 85, 105), 0.34) !important;
    color: color-mix(in srgb, var(--primal, #475569) 82%, var(--title, #111827)) !important;
}

.btn-outline-primary > .bi {
    color: currentColor !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
    background: rgba(var(--primal-rgb, 71, 85, 105), 0.12) !important;
    color: var(--title, #111827) !important;
    border-color: rgba(var(--primal-rgb, 71, 85, 105), 0.32) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background:
        linear-gradient(180deg, rgba(var(--primal-rgb, 71, 85, 105), 0.16) 0%, rgba(var(--primal-rgb, 71, 85, 105), 0.08) 100%),
        color-mix(in srgb, var(--hbody, #ffffff) 72%, var(--primal, #475569)) !important;
    border-color: rgba(var(--primal-rgb, 71, 85, 105), 0.46) !important;
    color: color-mix(in srgb, var(--primal, #475569) 88%, var(--title, #111827)) !important;
}

.btn-sm {
    border-radius: 0.66rem;
    padding: 0.36rem 0.72rem;
}

.btn-lg {
    border-radius: 0.92rem;
    padding: 0.72rem 1.32rem;
}

.btn.rounded-pill {
    border-radius: 999px !important;
}