/**
 * Esyasoft Unified Utility Cloud (UUC) Button Styles
 * Modeled after Ant Design v5 Button with UUC Typography & Design Tokens
 */

@keyframes uuc-btn-spin {
    100% {
        transform: rotate(360deg);
    }
}

.uuc-btn {
    /* Base CSS Variables per button instance */
    --btn-color: var(--uuc-btn-default-color);
    --btn-bg: var(--uuc-btn-default-bg);
    --btn-border: var(--uuc-btn-default-border);
    --btn-border-style: solid;
    --btn-hover-color: var(--uuc-color-primary-hover);
    --btn-hover-bg: var(--uuc-btn-default-bg);
    --btn-hover-border: var(--uuc-color-primary-hover);
    --btn-active-color: var(--uuc-color-primary-active);
    --btn-active-bg: var(--uuc-btn-default-bg);
    --btn-active-border: var(--uuc-color-primary-active);
    --btn-shadow: var(--uuc-btn-shadow);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--uuc-btn-font-family);
    font-weight: var(--uuc-btn-font-weight);
    font-size: var(--uuc-btn-font-size-md);
    line-height: var(--uuc-btn-line-height);
    white-space: nowrap;
    text-align: center;
    background-image: none;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border: 1px var(--btn-border-style) var(--btn-border);
    border-radius: var(--uuc-btn-radius-md);
    height: var(--uuc-btn-height-md);
    padding: 0 var(--uuc-btn-padding-inline-md);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    text-decoration: none;
    transition: var(--uuc-btn-transition);
    box-sizing: border-box;
    outline: none;
    -webkit-font-smoothing: antialiased;
}

.uuc-btn:hover:not(:disabled):not(.uuc-btn--disabled):not(.uuc-btn--loading) {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    text-decoration: none;
}

.uuc-btn:active:not(:disabled):not(.uuc-btn--disabled):not(.uuc-btn--loading) {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border);
}

.uuc-btn:focus-visible {
    outline: 2px solid var(--uuc-color-primary-hover);
    outline-offset: 1px;
}

/* ==========================================================================
   Color Palettes (sets semantic accent variables used by variants)
   ========================================================================== */

.uuc-btn--color-default {
    --accent-base: var(--uuc-color-text-primary);
    --accent-hover: var(--uuc-color-primary-hover);
    --accent-active: var(--uuc-color-primary-active);
    --accent-solid-bg: #1f2937;
    --accent-solid-hover: #374151;
    --accent-solid-active: #111827;
    --accent-filled-bg: var(--uuc-btn-filled-bg);
    --accent-filled-hover: var(--uuc-btn-filled-bg-hover);
    --accent-filled-active: var(--uuc-btn-filled-bg-active);
    --accent-shadow: var(--uuc-btn-shadow);
}

.uuc-btn--color-primary {
    --accent-base: var(--uuc-color-primary);
    --accent-hover: var(--uuc-color-primary-hover);
    --accent-active: var(--uuc-color-primary-active);
    --accent-solid-bg: var(--uuc-color-primary);
    --accent-solid-hover: var(--uuc-color-primary-hover);
    --accent-solid-active: var(--uuc-color-primary-active);
    --accent-filled-bg: var(--uuc-color-primary-bg);
    --accent-filled-hover: var(--uuc-color-primary-bg-hover);
    --accent-filled-active: #91caff;
    --accent-shadow: var(--uuc-btn-primary-shadow);
}

.uuc-btn--color-danger {
    --accent-base: var(--uuc-color-danger);
    --accent-hover: var(--uuc-color-danger-hover);
    --accent-active: var(--uuc-color-danger-active);
    --accent-solid-bg: var(--uuc-color-danger);
    --accent-solid-hover: var(--uuc-color-danger-hover);
    --accent-solid-active: var(--uuc-color-danger-active);
    --accent-filled-bg: var(--uuc-color-danger-bg);
    --accent-filled-hover: var(--uuc-color-danger-bg-hover);
    --accent-filled-active: #fecaca;
    --accent-shadow: var(--uuc-btn-danger-shadow);
}

.uuc-btn--color-success {
    --accent-base: var(--uuc-color-success);
    --accent-hover: var(--uuc-color-success-hover);
    --accent-active: var(--uuc-color-success-active);
    --accent-solid-bg: var(--uuc-color-success);
    --accent-solid-hover: var(--uuc-color-success-hover);
    --accent-solid-active: var(--uuc-color-success-active);
    --accent-filled-bg: var(--uuc-color-success-bg);
    --accent-filled-hover: var(--uuc-color-success-bg-hover);
    --accent-filled-active: #a7f3d0;
    --accent-shadow: 0 2px 0 rgba(16, 185, 129, 0.1);
}

.uuc-btn--color-warning {
    --accent-base: var(--uuc-color-warning);
    --accent-hover: var(--uuc-color-warning-hover);
    --accent-active: var(--uuc-color-warning-active);
    --accent-solid-bg: var(--uuc-color-warning);
    --accent-solid-hover: var(--uuc-color-warning-hover);
    --accent-solid-active: var(--uuc-color-warning-active);
    --accent-filled-bg: var(--uuc-color-warning-bg);
    --accent-filled-hover: var(--uuc-color-warning-bg-hover);
    --accent-filled-active: #fde68a;
    --accent-shadow: 0 2px 0 rgba(245, 158, 11, 0.1);
}

.uuc-btn--color-cyan {
    --accent-base: #13c2c2;
    --accent-hover: #36cfc9;
    --accent-active: #08979c;
    --accent-solid-bg: #13c2c2;
    --accent-solid-hover: #36cfc9;
    --accent-solid-active: #08979c;
    --accent-filled-bg: #e6fffb;
    --accent-filled-hover: #b5f5ec;
    --accent-filled-active: #87e8de;
    --accent-shadow: 0 2px 0 rgba(19, 194, 194, 0.1);
}

.uuc-btn--color-purple {
    --accent-base: #722ed1;
    --accent-hover: #9254de;
    --accent-active: #531dab;
    --accent-solid-bg: #722ed1;
    --accent-solid-hover: #9254de;
    --accent-solid-active: #531dab;
    --accent-filled-bg: #f9f0ff;
    --accent-filled-hover: #efdbff;
    --accent-filled-active: #d3adf7;
    --accent-shadow: 0 2px 0 rgba(114, 46, 209, 0.1);
}

/* ==========================================================================
   Variants (Outlined, Dashed, Solid, Filled, Text, Link)
   ========================================================================== */

/* Outlined (Default) */
.uuc-btn--variant-outlined {
    --btn-bg: #ffffff;
    --btn-color: var(--accent-base);
    --btn-border: var(--accent-base);
    --btn-hover-color: var(--accent-hover);
    --btn-hover-bg: #ffffff;
    --btn-hover-border: var(--accent-hover);
    --btn-active-color: var(--accent-active);
    --btn-active-bg: #ffffff;
    --btn-active-border: var(--accent-active);
}

.uuc-btn--color-default.uuc-btn--variant-outlined {
    --btn-border: var(--uuc-btn-default-border);
}

/* Dashed */
.uuc-btn--variant-dashed {
    --btn-bg: #ffffff;
    --btn-color: var(--accent-base);
    --btn-border: var(--accent-base);
    --btn-border-style: dashed;
    --btn-hover-color: var(--accent-hover);
    --btn-hover-bg: #ffffff;
    --btn-hover-border: var(--accent-hover);
    --btn-active-color: var(--accent-active);
    --btn-active-bg: #ffffff;
    --btn-active-border: var(--accent-active);
}

.uuc-btn--color-default.uuc-btn--variant-dashed {
    --btn-border: var(--uuc-btn-default-border);
}

/* Solid (Primary / Filled strong) */
.uuc-btn--variant-solid {
    --btn-bg: var(--accent-solid-bg);
    --btn-color: #ffffff;
    --btn-border: var(--accent-solid-bg);
    --btn-hover-color: #ffffff;
    --btn-hover-bg: var(--accent-solid-hover);
    --btn-hover-border: var(--accent-solid-hover);
    --btn-active-color: #ffffff;
    --btn-active-bg: var(--accent-solid-active);
    --btn-active-border: var(--accent-solid-active);
    --btn-shadow: var(--accent-shadow);
}

/* Filled (Soft tinted background, borderless) */
.uuc-btn--variant-filled {
    --btn-bg: var(--accent-filled-bg);
    --btn-color: var(--accent-base);
    --btn-border: transparent;
    --btn-hover-color: var(--accent-base);
    --btn-hover-bg: var(--accent-filled-hover);
    --btn-hover-border: transparent;
    --btn-active-color: var(--accent-active);
    --btn-active-bg: var(--accent-filled-active);
    --btn-active-border: transparent;
    --btn-shadow: none;
}

/* Text */
.uuc-btn--variant-text {
    --btn-bg: transparent;
    --btn-color: var(--accent-base);
    --btn-border: transparent;
    --btn-hover-color: var(--accent-base);
    --btn-hover-bg: var(--accent-filled-bg);
    --btn-hover-border: transparent;
    --btn-active-color: var(--accent-active);
    --btn-active-bg: var(--accent-filled-hover);
    --btn-active-border: transparent;
    --btn-shadow: none;
}

/* Link */
.uuc-btn--variant-link {
    --btn-bg: transparent;
    --btn-color: var(--accent-base);
    --btn-border: transparent;
    --btn-hover-color: var(--accent-hover);
    --btn-hover-bg: transparent;
    --btn-hover-border: transparent;
    --btn-active-color: var(--accent-active);
    --btn-active-bg: transparent;
    --btn-active-border: transparent;
    --btn-shadow: none;
}

.uuc-btn--color-default.uuc-btn--variant-link {
    --btn-color: var(--uuc-color-link);
    --btn-hover-color: var(--uuc-color-link-hover);
}

/* ==========================================================================
   Sizes (Small = 24px, Middle = 32px, Large = 40px)
   ========================================================================== */

.uuc-btn--sm {
    height: var(--uuc-btn-height-sm);
    padding: 0 var(--uuc-btn-padding-inline-sm);
    font-size: var(--uuc-btn-font-size-sm);
    border-radius: var(--uuc-btn-radius-sm);
    gap: 6px;
}

.uuc-btn--md {
    height: var(--uuc-btn-height-md);
    padding: 0 var(--uuc-btn-padding-inline-md);
    font-size: var(--uuc-btn-font-size-md);
    border-radius: var(--uuc-btn-radius-md);
}

.uuc-btn--lg {
    height: var(--uuc-btn-height-lg);
    padding: 0 var(--uuc-btn-padding-inline-lg);
    font-size: var(--uuc-btn-font-size-lg);
    border-radius: var(--uuc-btn-radius-lg);
}

/* ==========================================================================
   Shapes (Default, Round, Circle) & Icon-Only
   ========================================================================== */

.uuc-btn--round {
    border-radius: 9999px;
}

.uuc-btn--round.uuc-btn--sm {
    padding-inline: 12px;
}

.uuc-btn--round.uuc-btn--md {
    padding-inline: 16px;
}

.uuc-btn--round.uuc-btn--lg {
    padding-inline: 20px;
}

.uuc-btn--circle {
    border-radius: 50%;
    padding-inline: 0;
    min-width: var(--uuc-btn-height-md);
    width: var(--uuc-btn-height-md);
}

.uuc-btn--circle.uuc-btn--sm {
    min-width: var(--uuc-btn-height-sm);
    width: var(--uuc-btn-height-sm);
}

.uuc-btn--circle.uuc-btn--lg {
    min-width: var(--uuc-btn-height-lg);
    width: var(--uuc-btn-height-lg);
}

.uuc-btn--icon-only:not(.uuc-btn--round) {
    padding-inline: 0;
    width: var(--uuc-btn-height-md);
}

.uuc-btn--icon-only.uuc-btn--sm:not(.uuc-btn--round) {
    width: var(--uuc-btn-height-sm);
}

.uuc-btn--icon-only.uuc-btn--lg:not(.uuc-btn--round) {
    width: var(--uuc-btn-height-lg);
}

/* ==========================================================================
   Modifiers: Ghost, Block, Loading, Disabled
   ========================================================================== */

.uuc-btn--ghost {
    --btn-bg: transparent !important;
    --btn-shadow: none;
}

.uuc-btn--ghost.uuc-btn--color-default {
    --btn-color: #ffffff;
    --btn-border: #ffffff;
    --btn-hover-color: var(--uuc-color-primary-hover);
    --btn-hover-border: var(--uuc-color-primary-hover);
    --btn-active-color: var(--uuc-color-primary-active);
    --btn-active-border: var(--uuc-color-primary-active);
}

.uuc-btn--ghost.uuc-btn--variant-solid:not(.uuc-btn--color-default) {
    --btn-color: var(--accent-base);
    --btn-border: var(--accent-base);
    --btn-hover-color: var(--accent-hover);
    --btn-hover-border: var(--accent-hover);
    --btn-active-color: var(--accent-active);
    --btn-active-border: var(--accent-active);
}

.uuc-btn--block {
    width: 100%;
    display: flex;
}

.uuc-btn--loading {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.uuc-btn:disabled,
.uuc-btn--disabled {
    cursor: not-allowed;
    color: var(--uuc-color-text-disabled) !important;
    background-color: var(--uuc-btn-disabled-bg) !important;
    border-color: var(--uuc-btn-disabled-border) !important;
    box-shadow: none !important;
}

.uuc-btn--variant-text:disabled,
.uuc-btn--variant-text.uuc-btn--disabled,
.uuc-btn--variant-link:disabled,
.uuc-btn--variant-link.uuc-btn--disabled,
.uuc-btn--ghost:disabled,
.uuc-btn--ghost.uuc-btn--disabled {
    background-color: transparent !important;
    border-color: transparent !important;
}

.uuc-btn--ghost:disabled:not(.uuc-btn--variant-text):not(.uuc-btn--variant-link),
.uuc-btn--ghost.uuc-btn--disabled:not(.uuc-btn--variant-text):not(.uuc-btn--variant-link) {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================================================
   Inner Elements: Icon & Spinner
   ========================================================================== */

.uuc-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.uuc-btn__spinner {
    animation: uuc-btn-spin 1s infinite linear;
}

.uuc-btn__content {
    display: inline-block;
}

/* ==========================================================================
   Button Group (.uuc-btn-group)
   ========================================================================== */

.uuc-btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.uuc-btn-group > .uuc-btn {
    position: relative;
}

.uuc-btn-group > .uuc-btn:hover,
.uuc-btn-group > .uuc-btn:focus,
.uuc-btn-group > .uuc-btn:active {
    z-index: 2;
}

.uuc-btn-group > .uuc-btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.uuc-btn-group > .uuc-btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.uuc-btn-group > .uuc-btn--variant-solid:not(:first-child) {
    border-left-color: rgba(255, 255, 255, 0.25);
}