/* PrimitivesStyles.css - Base primitive component styles */

/* Base button */
.UnB-Button {
    --unb-button-height: 2.5em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    inline-size: auto;
    block-size: var(--unb-button-height);
    padding: 0 1em;
    padding-block: 0;
    padding-inline: 1em;
    border: none;
    border-radius: var(--unb-border-radius, 0.5em);
    font-family: inherit;
    font-size: var(--unb-font-size-body, 1rem);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 100ms ease-out,
                opacity var(--unb-transition-duration, 300ms) ease-out;
}

.UnB-Button:focus-visible {
    outline: 2px solid var(--unb-focus-color, rgba(100, 200, 255, 0.5));
    outline-offset: 2px;
}

.UnB-Button:active:not([disabled]) {
    transform: scale(0.98);
}

.UnB-Button[disabled],
.UnB-Button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Button sizes */
.UnB-Button--sm {
    --unb-button-height: 2em;
    padding-inline: 0.75em;
    font-size: var(--unb-font-size-caption, 0.75rem);
}

.UnB-Button--md {
    --unb-button-height: 2.5em;
    padding-inline: 1em;
}

.UnB-Button--lg {
    --unb-button-height: 3em;
    padding-inline: 1.5em;
    font-size: var(--unb-font-size-label, 0.875rem);
}

/* Button variants */
.UnB-Button--primary {
    background-color: var(--unb-accent-color, #64b5f6);
    color: var(--unb-text-on-accent, #0a0a12);
}

.UnB-Button--secondary {
    background-color: transparent;
    border: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.2));
    color: var(--unb-text-primary, #e8e8f0);
}

.UnB-Button--ghost {
    background-color: transparent;
    color: var(--unb-text-secondary, rgba(232, 232, 240, 0.7));
}

.UnB-Button--ghost:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.UnB-Button--outline {
    background-color: transparent;
    border: 1px solid var(--unb-accent-color, #64b5f6);
    color: var(--unb-accent-color, #64b5f6);
}

.UnB-Button--destructive {
    background-color: var(--unb-error-color, #e57373);
    color: var(--unb-text-on-error, #ffffff);
}

/* Button icon */
.UnB-Button .UnB-Icon {
    flex-shrink: 0;
}

.UnB-Button-Text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon only button */
.UnB-Button--icon-only {
    padding: 0;
    inline-size: var(--unb-button-height);
    block-size: var(--unb-button-height);
}

/* Base input */
.UnB-Input {
    --unb-input-height: 2.5em;

    display: inline-flex;
    align-items: center;
    inline-size: 100%;
    block-size: var(--unb-input-height);
    padding: 0 0.75em;
    background-color: var(--unb-input-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--unb-border-radius, 0.25em);
    color: var(--unb-text-primary, #e8e8f0);
    font-family: inherit;
    font-size: var(--unb-font-size-body, 1rem);
    outline: none;
    transition: border-color var(--unb-transition-duration, 200ms) ease-out,
                background-color var(--unb-transition-duration, 200ms) ease-out;
}

.UnB-Input:focus {
    border-color: var(--unb-accent-color, #64b5f6);
    background-color: var(--unb-input-bg-focus, rgba(255, 255, 255, 0.08));
}

.UnB-Input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.UnB-Input::placeholder {
    color: var(--unb-text-muted, rgba(232, 232, 240, 0.4));
}

/* Input sizes */
.UnB-Input--sm {
    --unb-input-height: 2em;
    font-size: var(--unb-font-size-caption, 0.75rem);
}

.UnB-Input--lg {
    --unb-input-height: 3em;
    font-size: var(--unb-font-size-label, 0.875rem);
}

/* Base link */
.UnB-Link {
    color: var(--unb-accent-color, #64b5f6);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--unb-transition-duration, 200ms) ease-out;
}

.UnB-Link:hover {
    color: var(--unb-accent-hover, #90caf9);
    text-decoration: underline;
}

.UnB-Link:focus-visible {
    outline: 2px solid var(--unb-focus-color, rgba(100, 200, 255, 0.5));
    outline-offset: 2px;
}

/* Base badge */
.UnB-Badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125em 0.5em;
    background-color: var(--unb-surface-elevated, #1e1e32);
    border-radius: 999px;
    font-size: var(--unb-font-size-caption, 0.75rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--unb-text-secondary, rgba(232, 232, 240, 0.7));
}

.UnB-Badge--primary {
    background-color: var(--unb-accent-color, #64b5f6);
    color: var(--unb-text-on-accent, #0a0a12);
}

.UnB-Badge--success {
    background-color: var(--unb-success-color, #81c784);
    color: var(--unb-text-on-success, #0a0a12);
}

.UnB-Badge--warning {
    background-color: var(--unb-warning-color, #ffb74d);
    color: var(--unb-text-on-warning, #0a0a12);
}

.UnB-Badge--error {
    background-color: var(--unb-error-color, #e57373);
    color: var(--unb-text-on-error, #ffffff);
}