/* UnBBoxStyles.css - UnBBox rendering contract */

/* Base UnBBox contract */
.UnBBox {
    position: relative;
    background-color: transparent;
    border: none;
    outline: none;

    /* Depth opacity variable */
    --unb-depth-opacity: 0.6;
}

/* Background layer (::before) */
.UnBBox::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--unb-base-color, #1a1a2e);
    opacity: var(--unb-depth-opacity);
    border-radius: inherit;
    transition: opacity var(--unb-transition-duration, 300ms) ease-out;
    pointer-events: none;
}

/* Border layer (::after) */
.UnBBox::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
    border-radius: inherit;
    opacity: calc(var(--unb-depth-opacity) * 0.8);
    transition: opacity var(--unb-transition-duration, 300ms) ease-out;
    pointer-events: none;
}

/* Depth levels */
.UnBBox.Muted {
    --unb-depth-opacity: 0.3;
}

.UnBBox.Balance {
    --unb-depth-opacity: 0.6;
}

.UnBBox.Surface {
    --unb-depth-opacity: 1;
}

/* State transformations */
.UnBBox:not([disabled]):hover,
.UnBBox:not([aria-disabled="true"]):hover {
    --unb-depth-opacity: 1;
}

.UnBBox:not([disabled]):active,
.UnBBox:not([aria-disabled="true"]):active {
    --unb-depth-opacity: 0.3;
    transform: scale(0.98);
}

.UnBBox:not([disabled]):focus,
.UnBBox:not([aria-disabled="true"]):focus {
    --unb-depth-opacity: 1;
    outline: 2px solid var(--unb-focus-color, rgba(100, 200, 255, 0.5));
    outline-offset: 2px;
}

.UnBBox[disabled],
.UnBBox[aria-disabled="true"] {
    --unb-depth-opacity: 0.3;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Disabled state - no interactions */
.UnBBox[disabled]::before,
.UnBBox[aria-disabled="true"]::before {
    opacity: 0.3;
}

.UnBBox[disabled]::after,
.UnBBox[aria-disabled="true"]::after {
    opacity: 0.2;
}

/* Transition for smooth state changes */
.UnBBox {
    transition: transform 100ms ease-out;
}

/* Inert state via data attribute */
.UnBBox[inert] {
    pointer-events: none;
    --unb-depth-opacity: 0.2;
}

/* Common UnBBox shapes */
.UnBBox--rounded {
    border-radius: var(--unb-border-radius, 0.5em);
}

.UnBBox--sharp {
    border-radius: 0;
}

.UnBBox--pill {
    border-radius: 9999px;
}

/* Content layer z-index
 * Content must always be above ::before and ::after */
.UnBBox > * {
    position: relative;
    z-index: 1;
}

/* Ensure nested elements don't conflict with pseudo-elements */
.UnBBox::before,
.UnBBox::after {
    isolation: isolate;
}

/* Custom depth overrides */
.UnBBox[data-depth="Muted"] {
    --unb-depth-opacity: 0.3;
}

.UnBBox[data-depth="Balance"] {
    --unb-depth-opacity: 0.6;
}

.UnBBox[data-depth="Surface"] {
    --unb-depth-opacity: 1;
}

/* Animation for depth transitions */
.UnB--animate-depth {
    transition: --unb-depth-opacity var(--unb-transition-duration, 300ms) ease-out;
}

@supports (background-color: color-mix(in srgb, red 50%, blue)) {
    .UnBBox::before {
        background-color: color-mix(
            in srgb,
            var(--unb-base-color, #1a1a2e) var(--unb-depth-opacity, 60%),
            transparent
        );
        opacity: 1;
    }
}