/* * nice-select.css * Base styles for the initNiceSelect() dropdown widget. * Override the CSS variables below in your project stylesheet. * * --ns-border: border color of the closed button * --ns-radius: border radius * --ns-accent: border/focus color when open or focused * --ns-accent-shadow: box-shadow color when open or focused * --ns-hover-bg: background of hovered / active list item * * NOTE: .nice-select-list is appended to with position:fixed (set by JS) * so it is never clipped by overflow:hidden ancestors. */ .nice-select { position: relative; } .nice-select-btn { width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--ns-border, #ccc); border-radius: var(--ns-radius, 8px); font-family: inherit; font-size: inherit; color: inherit; background: #fff; cursor: pointer; outline: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; transition: border-color .15s, box-shadow .15s; } .nice-select-btn:focus, .nice-select.open .nice-select-btn { border-color: var(--ns-accent, #333); box-shadow: 0 0 0 3px var(--ns-accent-shadow, rgba(0,0,0,.08)); } .nice-select.open .nice-select-btn { border-radius: var(--ns-radius, 8px) var(--ns-radius, 8px) 0 0; } .nice-select-chevron { flex-shrink: 0; opacity: .5; transition: transform .2s; } .nice-select.open .nice-select-chevron { transform: rotate(180deg); } /* List is body-appended; position & dimensions set by JS */ .nice-select-list { display: none; position: fixed; z-index: 9000; background: #fff; border: 1.5px solid var(--ns-accent, #333); border-radius: 0 0 var(--ns-radius, 8px) var(--ns-radius, 8px); box-shadow: 0 4px 16px rgba(0,0,0,.12); list-style: none; margin: 0; padding: .25rem 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; } .nice-select-list.open { display: block; } .nice-select-list li { padding: .6rem .85rem; cursor: pointer; transition: background .1s; } .nice-select-list li:hover, .nice-select-list li.active { background: var(--ns-hover-bg, #f4f4f4); } .nice-select-list li.nice-select-group { padding: .5rem .85rem .2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ns-group-color, #999); cursor: default; pointer-events: none; } /* Modifier classes — add to the