:root,
html[data-theme="dark"] {
    --mws-info-button: var(--mws-primary);
    --mws-info-button-hover: color-mix(in srgb, var(--mws-primary) 82%, var(--mws-accent) 18%);
    --mws-success-button: #28c880;
    --mws-success-button-hover: #3bd591;
    --mws-danger-button: #ef465c;
    --mws-danger-button-hover: #f25e70;
}

html[data-theme="light"] {
    --mws-info-button: var(--mws-primary);
    --mws-info-button-hover: color-mix(in srgb, var(--mws-primary) 82%, var(--mws-accent) 18%);
    --mws-success-button: #138a59;
    --mws-success-button-hover: #0c754a;
    --mws-danger-button: #d72f48;
    --mws-danger-button-hover: #bd233b;
}

.ui-btn,
.admin-action-button,
.open-app-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-decoration: none;
}

.ui-btn::after,
.admin-action-button::after,
.open-app-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .18), transparent 80%);
    transform: translateX(-120%);
    transition: transform .42s ease;
    pointer-events: none;
}

.ui-btn:hover::after,
.admin-action-button:hover::after,
.open-app-link:hover::after {
    transform: translateX(120%);
}

.ui-btn-primary {
    border-color: rgba(var(--mws-primary-rgb), .48) !important;
    color: var(--mws-on-primary) !important;
    background: var(--mws-accent-gradient) !important;
    box-shadow: 0 9px 24px rgba(var(--mws-primary-rgb), .22);
}

.ui-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--mws-info-button-hover), var(--mws-info-button)) !important;
    box-shadow: 0 12px 30px rgba(var(--mws-primary-rgb), .3);
}

.ui-btn-success {
    border-color: rgba(40, 200, 128, .5) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--mws-success-button), #159e61) !important;
    box-shadow: 0 9px 24px rgba(40, 200, 128, .2);
}

.ui-btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--mws-success-button-hover), var(--mws-success-button)) !important;
    box-shadow: 0 12px 30px rgba(40, 200, 128, .28);
}

.ui-btn-danger {
    border-color: rgba(239, 70, 92, .5) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--mws-danger-button), #ca2c43) !important;
    box-shadow: 0 9px 24px rgba(239, 70, 92, .2);
}

.ui-btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--mws-danger-button-hover), var(--mws-danger-button)) !important;
    box-shadow: 0 12px 30px rgba(239, 70, 92, .28);
}

.ui-btn-secondary,
.admin-action-button {
    border-color: rgba(var(--mws-primary-rgb), .28) !important;
    color: var(--mws-text) !important;
    background: linear-gradient(135deg, rgba(var(--mws-primary-rgb), .17), rgba(var(--mws-primary-rgb), .08)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.ui-btn-secondary:hover:not(:disabled),
.admin-action-button:hover:not(:disabled) {
    border-color: rgba(var(--mws-primary-rgb), .48) !important;
    background: linear-gradient(135deg, rgba(var(--mws-primary-rgb), .25), rgba(var(--mws-primary-rgb), .12)) !important;
}

.ui-btn-ghost {
    border-color: rgba(var(--mws-primary-rgb), .16) !important;
    color: var(--mws-text) !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: none;
}

.ui-btn-ghost:hover:not(:disabled) {
    border-color: rgba(var(--mws-primary-rgb), .28) !important;
    background: rgba(var(--mws-primary-rgb), .09) !important;
}

.ui-btn:focus-visible,
.admin-action-button:focus-visible,
.open-app-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--mws-primary-rgb), .22), 0 9px 24px rgba(var(--mws-primary-rgb), .2);
}

.ui-btn-success:focus-visible {
    box-shadow: 0 0 0 3px rgba(40, 200, 128, .22), 0 9px 24px rgba(40, 200, 128, .2);
}

.ui-btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(239, 70, 92, .22), 0 9px 24px rgba(239, 70, 92, .2);
}

.ui-btn:disabled,
.admin-action-button:disabled {
    opacity: .45;
    filter: saturate(.45);
    box-shadow: none !important;
}

.open-app-link {
    color: var(--mws-info-button) !important;
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-ui-reduce-motion="off"]) .ui-btn::after,
    html:not([data-ui-reduce-motion="off"]) .admin-action-button::after,
    html:not([data-ui-reduce-motion="off"]) .open-app-link::after {
        display: none;
    }
}