/* src/components/basic/XWUIInputNativeSelect/XWUIInputNativeSelect.css */
/**
 * XWUIInputNativeSelect Component Styles
 * Native select wrapper
 */

.xwui-native-select-container {
    display: inline-block;
}

.xwui-native-select-container.xwui-native-select-full-width {
    width: 100%;
}

.xwui-native-select-label {
    display: block;
    margin-bottom: var(--xwui-field-label-gap, 0.375rem);
    font-size: var(--xwui-field-label-size, var(--font-size-sm, 0.875rem));
    font-weight: var(--xwui-field-label-weight, var(--font-weight-medium, 500));
    color: var(--xwui-field-label-color, var(--text-primary));
    font-family: var(--xwui-field-label-family, var(--font-label-family, var(--font-family-base, sans-serif)));
    line-height: var(--xwui-field-label-line-height, 1.5);
}

.xwui-native-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.xwui-native-select-wrapper:is(.xwui-native-select-s,.xwui-native-select-sm) .xwui-native-select {
    padding: 0 var(--xwui-size-pad-x-sm, 10px);
    font-size: var(--xwui-size-font-sm, 12px);
    height: var(--xwui-select-height-sm);
    min-height: var(--xwui-select-height-sm);
}

.xwui-native-select-wrapper:is(.xwui-native-select-m,.xwui-native-select-md) .xwui-native-select {
    padding: 0 var(--xwui-size-pad-x-md, 14px);
    font-size: var(--xwui-size-font-md, 14px);
    height: var(--xwui-select-height-md);
    min-height: var(--xwui-select-height-md);
}

.xwui-native-select-wrapper:is(.xwui-native-select-l,.xwui-native-select-lg) .xwui-native-select {
    padding: 0 var(--xwui-size-pad-x-lg, 18px);
    font-size: var(--xwui-size-font-lg, 16px);
    height: var(--xwui-select-height-lg);
    min-height: var(--xwui-select-height-lg);
}

.xwui-native-select {
    width: 100%;
    box-sizing: border-box;
    height: var(--xwui-select-height-md);
    min-height: var(--xwui-select-height-md);
    padding: 0 var(--xwui-size-pad-x-md, 14px);
    line-height: var(--xwui-control-line-height, 1);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--xwui-size-font-md, 14px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.xwui-native-select:hover:not(:disabled) {
    border-color: var(--border-strong, rgba(0, 0, 0, 0.08));
}

.xwui-native-select:focus {
    outline: none;
    border-color: var(--accent-primary, #4f46e5);
    /* Focus ring uses the accent-primary-alpha token (20% alpha of current
       accent); legacy rgba fallback retained for browsers without color-mix. */
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    box-shadow: 0 0 0 2px var(--accent-primary-alpha);
}

.xwui-native-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-tertiary, #f1f3f5);
}

.xwui-native-select-wrapper.xwui-native-select-error .xwui-native-select {
    border-color: var(--status-error, #f44336);
}

.xwui-native-select-wrapper.xwui-native-select-error .xwui-native-select:focus {
    border-color: var(--status-error, #f44336);
    /* Error focus ring uses --accent-error-light (universal semantic). */
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1);
    box-shadow: 0 0 0 2px var(--accent-error-light);
}

.xwui-native-select-helper-text {
    margin-top: var(--spacing-xs, 4px);
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
}

.xwui-native-select-error-text {
    margin-top: var(--spacing-xs, 4px);
    font-size: 0.75rem;
    color: var(--status-error, #f44336);
}

/* Generated shared control scale: tools/build-styles/control-size-contract.mjs */
:is(.xwui-native-select-wrapper.xwui-native-select-xxxxs,.xwui-native-select-wrapper.xwui-native-select-4xs) { --xwui-control-height: var(--xwui-select-height-xxxxs); --xwui-control-font-size: var(--xwui-size-font-xxxxs); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxxs,.xwui-native-select-wrapper.xwui-native-select-4xs) .xwui-native-select { height: var(--xwui-select-height-xxxxs); min-height: var(--xwui-select-height-xxxxs); box-sizing: border-box; font-size: var(--xwui-size-font-xxxxs); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxs,.xwui-native-select-wrapper.xwui-native-select-3xs) { --xwui-control-height: var(--xwui-select-height-xxxs); --xwui-control-font-size: var(--xwui-size-font-xxxs); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxs,.xwui-native-select-wrapper.xwui-native-select-3xs) .xwui-native-select { height: var(--xwui-select-height-xxxs); min-height: var(--xwui-select-height-xxxs); box-sizing: border-box; font-size: var(--xwui-size-font-xxxs); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxs,.xwui-native-select-wrapper.xwui-native-select-2xs,.xwui-native-select-wrapper.xwui-native-select-tiny) { --xwui-control-height: var(--xwui-select-height-xxs); --xwui-control-font-size: var(--xwui-size-font-xxs); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxs,.xwui-native-select-wrapper.xwui-native-select-2xs,.xwui-native-select-wrapper.xwui-native-select-tiny) .xwui-native-select { height: var(--xwui-select-height-xxs); min-height: var(--xwui-select-height-xxs); box-sizing: border-box; font-size: var(--xwui-size-font-xxs); }
.xwui-native-select-wrapper.xwui-native-select-xs { --xwui-control-height: var(--xwui-select-height-xs); --xwui-control-font-size: var(--xwui-size-font-xs); }
.xwui-native-select-wrapper.xwui-native-select-xs .xwui-native-select { height: var(--xwui-select-height-xs); min-height: var(--xwui-select-height-xs); box-sizing: border-box; font-size: var(--xwui-size-font-xs); }
:is(.xwui-native-select-wrapper.xwui-native-select-sm,.xwui-native-select-wrapper.xwui-native-select-s,.xwui-native-select-wrapper.xwui-native-select-small) { --xwui-control-height: var(--xwui-select-height-sm); --xwui-control-font-size: var(--xwui-size-font-sm); }
:is(.xwui-native-select-wrapper.xwui-native-select-sm,.xwui-native-select-wrapper.xwui-native-select-s,.xwui-native-select-wrapper.xwui-native-select-small) .xwui-native-select { height: var(--xwui-select-height-sm); min-height: var(--xwui-select-height-sm); box-sizing: border-box; font-size: var(--xwui-size-font-sm); }
:is(.xwui-native-select-wrapper.xwui-native-select-md,.xwui-native-select-wrapper.xwui-native-select-m,.xwui-native-select-wrapper.xwui-native-select-medium) { --xwui-control-height: var(--xwui-select-height-md); --xwui-control-font-size: var(--xwui-size-font-md); }
:is(.xwui-native-select-wrapper.xwui-native-select-md,.xwui-native-select-wrapper.xwui-native-select-m,.xwui-native-select-wrapper.xwui-native-select-medium) .xwui-native-select { height: var(--xwui-select-height-md); min-height: var(--xwui-select-height-md); box-sizing: border-box; font-size: var(--xwui-size-font-md); }
:is(.xwui-native-select-wrapper.xwui-native-select-lg,.xwui-native-select-wrapper.xwui-native-select-l,.xwui-native-select-wrapper.xwui-native-select-large) { --xwui-control-height: var(--xwui-select-height-lg); --xwui-control-font-size: var(--xwui-size-font-lg); }
:is(.xwui-native-select-wrapper.xwui-native-select-lg,.xwui-native-select-wrapper.xwui-native-select-l,.xwui-native-select-wrapper.xwui-native-select-large) .xwui-native-select { height: var(--xwui-select-height-lg); min-height: var(--xwui-select-height-lg); box-sizing: border-box; font-size: var(--xwui-size-font-lg); }
.xwui-native-select-wrapper.xwui-native-select-xl { --xwui-control-height: var(--xwui-select-height-xl); --xwui-control-font-size: var(--xwui-size-font-xl); }
.xwui-native-select-wrapper.xwui-native-select-xl .xwui-native-select { height: var(--xwui-select-height-xl); min-height: var(--xwui-select-height-xl); box-sizing: border-box; font-size: var(--xwui-size-font-xl); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxl,.xwui-native-select-wrapper.xwui-native-select-2xl) { --xwui-control-height: var(--xwui-select-height-xxl); --xwui-control-font-size: var(--xwui-size-font-xxl); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxl,.xwui-native-select-wrapper.xwui-native-select-2xl) .xwui-native-select { height: var(--xwui-select-height-xxl); min-height: var(--xwui-select-height-xxl); box-sizing: border-box; font-size: var(--xwui-size-font-xxl); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxl,.xwui-native-select-wrapper.xwui-native-select-3xl) { --xwui-control-height: var(--xwui-select-height-xxxl); --xwui-control-font-size: var(--xwui-size-font-xxxl); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxl,.xwui-native-select-wrapper.xwui-native-select-3xl) .xwui-native-select { height: var(--xwui-select-height-xxxl); min-height: var(--xwui-select-height-xxxl); box-sizing: border-box; font-size: var(--xwui-size-font-xxxl); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxxl,.xwui-native-select-wrapper.xwui-native-select-4xl) { --xwui-control-height: var(--xwui-select-height-xxxxl); --xwui-control-font-size: var(--xwui-size-font-xxxxl); }
:is(.xwui-native-select-wrapper.xwui-native-select-xxxxl,.xwui-native-select-wrapper.xwui-native-select-4xl) .xwui-native-select { height: var(--xwui-select-height-xxxxl); min-height: var(--xwui-select-height-xxxxl); box-sizing: border-box; font-size: var(--xwui-size-font-xxxxl); }

/* Generated native control surfaces: tools/build-styles/native-control-contract.mjs */
.xwui-native-select {
    height: var(--xwui-control-height, var(--xwui-input-height-md));
    min-height: var(--xwui-control-height, var(--xwui-input-height-md));
    box-sizing: border-box;
    font-family: var(--font-input-family, var(--font-family-base, sans-serif));
    font-size: var(--xwui-control-font-size, var(--xwui-size-font-md));
}