/**
 * XWUIDrawer Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/drawer/*.css (component-specific border widths)
 * - Roundness: theme/roundness/drawer/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.xwui-drawer-overlay-visible {
    opacity: 1;
}

.xwui-drawer {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    transition: transform 0.3s ease;
}

/* Placement variants */
.xwui-drawer-left {
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
}

.xwui-drawer-right {
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}

.xwui-drawer-top {
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

.xwui-drawer-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
}

.xwui-drawer-visible {
    transform: translate(0, 0);
}

/* Size variants (canonical 9-step scale) */
.xwui-drawer-left:is(.xwui-drawer-3xs,.xwui-drawer-xxxs),
.xwui-drawer-right:is(.xwui-drawer-3xs,.xwui-drawer-xxxs) { width: 160px; }
.xwui-drawer-left:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs),
.xwui-drawer-right:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs) { width: 80px; }
.xwui-drawer-left:is(.xwui-drawer-2xs,.xwui-drawer-xxs),
.xwui-drawer-right:is(.xwui-drawer-2xs,.xwui-drawer-xxs) { width: 220px; }
.xwui-drawer-left.xwui-drawer-xs,
.xwui-drawer-right.xwui-drawer-xs { width: 260px; }
.xwui-drawer-left:is(.xwui-drawer-s,.xwui-drawer-sm),
.xwui-drawer-right:is(.xwui-drawer-s,.xwui-drawer-sm) { width: 320px; }
.xwui-drawer-left:is(.xwui-drawer-m,.xwui-drawer-md),
.xwui-drawer-right:is(.xwui-drawer-m,.xwui-drawer-md) { width: 480px; }
.xwui-drawer-left:is(.xwui-drawer-l,.xwui-drawer-lg),
.xwui-drawer-right:is(.xwui-drawer-l,.xwui-drawer-lg) { width: 640px; }
.xwui-drawer-left.xwui-drawer-xl,
.xwui-drawer-right.xwui-drawer-xl { width: 768px; }
.xwui-drawer-left:is(.xwui-drawer-2xl,.xwui-drawer-xxl),
.xwui-drawer-right:is(.xwui-drawer-2xl,.xwui-drawer-xxl) { width: 998px; }
.xwui-drawer-left:is(.xwui-drawer-3xl,.xwui-drawer-xxxl),
.xwui-drawer-right:is(.xwui-drawer-3xl,.xwui-drawer-xxxl) { width: 1228px; }
.xwui-drawer-left:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl),
.xwui-drawer-right:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl) { width: 1964.8px; }

.xwui-drawer-left.xwui-drawer-full,
.xwui-drawer-right.xwui-drawer-full {
    width: 100%;
}

.xwui-drawer-top:is(.xwui-drawer-3xs,.xwui-drawer-xxxs),
.xwui-drawer-bottom:is(.xwui-drawer-3xs,.xwui-drawer-xxxs) { height: 120px; }
.xwui-drawer-top:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs),
.xwui-drawer-bottom:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs) { height: 60px; }
.xwui-drawer-top:is(.xwui-drawer-2xs,.xwui-drawer-xxs),
.xwui-drawer-bottom:is(.xwui-drawer-2xs,.xwui-drawer-xxs) { height: 170px; }
.xwui-drawer-top.xwui-drawer-xs,
.xwui-drawer-bottom.xwui-drawer-xs { height: 200px; }
.xwui-drawer-top:is(.xwui-drawer-s,.xwui-drawer-sm),
.xwui-drawer-bottom:is(.xwui-drawer-s,.xwui-drawer-sm) { height: 240px; }
.xwui-drawer-top:is(.xwui-drawer-m,.xwui-drawer-md),
.xwui-drawer-bottom:is(.xwui-drawer-m,.xwui-drawer-md) { height: 400px; }
.xwui-drawer-top:is(.xwui-drawer-l,.xwui-drawer-lg),
.xwui-drawer-bottom:is(.xwui-drawer-l,.xwui-drawer-lg) { height: 600px; }
.xwui-drawer-top.xwui-drawer-xl,
.xwui-drawer-bottom.xwui-drawer-xl { height: 720px; }
.xwui-drawer-top:is(.xwui-drawer-2xl,.xwui-drawer-xxl),
.xwui-drawer-bottom:is(.xwui-drawer-2xl,.xwui-drawer-xxl) { height: 936px; }
.xwui-drawer-top:is(.xwui-drawer-3xl,.xwui-drawer-xxxl),
.xwui-drawer-bottom:is(.xwui-drawer-3xl,.xwui-drawer-xxxl) { height: 1152px; }
.xwui-drawer-top:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl),
.xwui-drawer-bottom:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl) { height: 1843.2px; }

/* Legacy size aliases */
.xwui-drawer-left.xwui-drawer-small,
.xwui-drawer-right.xwui-drawer-small { width: 320px; }
.xwui-drawer-left.xwui-drawer-medium,
.xwui-drawer-right.xwui-drawer-medium { width: 480px; }
.xwui-drawer-left.xwui-drawer-large,
.xwui-drawer-right.xwui-drawer-large { width: 640px; }
.xwui-drawer-top.xwui-drawer-small,
.xwui-drawer-bottom.xwui-drawer-small { height: 240px; }
.xwui-drawer-top.xwui-drawer-medium,
.xwui-drawer-bottom.xwui-drawer-medium { height: 400px; }
.xwui-drawer-top.xwui-drawer-large,
.xwui-drawer-bottom.xwui-drawer-large { height: 600px; }

.xwui-drawer-top.xwui-drawer-full,
.xwui-drawer-bottom.xwui-drawer-full {
    height: 100%;
}

/* Header */
.xwui-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg, 1.25rem) var(--spacing-lg, 1.5rem);
    border-bottom: var(--border-drawer-width, var(--border-width-regular, 1.5px)) var(--border-drawer-style, solid) var(--border-drawer-color, var(--border-color));
    flex-shrink: 0;
}

.xwui-drawer-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

.xwui-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-overlay, var(--radius-sm, 6px));
    transition: background 0.2s, color 0.2s;
}

.xwui-drawer-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.xwui-drawer-close svg {
    width: 20px;
    height: 20px;
}

/* Body */
.xwui-drawer-body {
    flex: 1;
    padding: var(--spacing-lg, 1.5rem);
    overflow-y: auto;
    color: var(--text-primary);
}

/* Footer */
.xwui-drawer-footer {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    border-top: var(--border-drawer-width, var(--border-width-regular, 1.5px)) var(--border-drawer-style, solid) var(--border-drawer-color, var(--border-color));
    flex-shrink: 0;
}