welcome-ui/dist/Select.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._indicators_cxg1w_2{position:absolute;padding:0;top:0;height:var(--select-height, 100%);right:var(--indicators-right, var(--spacing-md));display:flex;gap:var(--spacing-xs)}._indicators_cxg1w_2._size-xs_cxg1w_11{--indicators-right: var(--spacing-sm)}._dropdown-indicator_cxg1w_14{position:relative;height:100%;padding:0;outline:none!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:transparent;display:flex;align-items:center;justify-content:center}._dropdown-indicator_cxg1w_14 ._styled-icon_cxg1w_27{transform:none;transition-property:transform;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary)}._dropdown-indicator_cxg1w_14._open_cxg1w_33 ._styled-icon_cxg1w_27{transform:rotate3d(0,0,1,180deg)}._dropdown-indicator_cxg1w_14:not(:last-child){width:auto}._dropdown-indicator_cxg1w_14:disabled{color:var(--color-beige-60)}._input-wrapper_cxg1w_42{position:relative}._input-wrapper_cxg1w_42:has(>._icon-placement-right_cxg1w_45) ._indicators_cxg1w_2{--indicators-right: calc(var(--spacing-lg) + var(--spacing-md) * 2)}._root_cxg1w_49{--select-placeholder-color: var(--color-neutral-60);background-color:var(--select-background-color, var(--color-neutral-10));border-color:var(--select-border-color, var(--color-neutral-30));border-radius:var(--radius-md);border-style:solid;border-width:var(--border-width-sm);color:var(--select-text-color, var(--color-neutral-90));font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-16);outline:2px solid var(--select-outline-color, transparent);cursor:default;width:100%;transition-property:all;transition-timing-function:var(--timing-primary);transition-duration:var(--duration-medium);height:var(--select-height);padding-bottom:var(--select-padding-bottom);padding-left:var(--select-padding-left);padding-right:var(--select-padding-right);padding-top:var(--select-padding-top);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._root_cxg1w_49._icon-placement-left_cxg1w_80,._root_cxg1w_49._icon-placement-both_cxg1w_80{padding-left:calc(var(--select-padding-left) + var(--select-icon-size, 1rem) + var(--spacing-sm))}._root_cxg1w_49._clearable_cxg1w_83,._root_cxg1w_49._icon-placement-right_cxg1w_45,._root_cxg1w_49._icon-placement-both_cxg1w_80{padding-right:calc(var(--select-padding-right) + var(--select-icon-size, 1rem) + var(--spacing-sm))}._root_cxg1w_49._clearable_cxg1w_83._icon-placement-right_cxg1w_45,._root_cxg1w_49._clearable_cxg1w_83._icon-placement-both_cxg1w_80{padding-right:calc(var(--select-padding-right) + (var(--select-icon-size, 1rem) + var(--spacing-sm)) * 2)}._root_cxg1w_49:disabled{--select-background-color: var(--select-color-beige-40);--select-text-color: var(--select-color-beige-70);cursor:not-allowed}._root_cxg1w_49:hover:not([class*=variant]){--select-border-color: var(--color-brand-40)}._root_cxg1w_49:focus:not([class*=variant]){--select-outline-color: var(--color-brand-20);--select-border-color: var(--color-brand-40)}._root_cxg1w_49._transparent_cxg1w_101{--select-border-color: transparent;--select-background-color: transparent}._root_cxg1w_49._transparent_cxg1w_101:hover{--select-border-color: var(--color-neutral-20)}._root_cxg1w_49::placeholder{color:var(--select-placeholder-color)}._root_cxg1w_49 br{display:none}._root_cxg1w_49:before{content:attr(data-spacer);visibility:hidden;display:block;height:0}._root_cxg1w_49:empty:after{content:attr(placeholder);position:absolute;top:0;right:0;bottom:0;left:0;padding:inherit;color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._root_cxg1w_49:empty:before{height:auto}._variant-danger_cxg1w_136{--select-border-color: var(--color-red-70);--select-outline-color: var(--color-red-30)}._variant-success_cxg1w_140{--select-border-color: var(--color-green-60);--select-outline-color: var(--color-green-30)}._variant-warning_cxg1w_144{--select-border-color: var(--color-orange-60);--select-outline-color: var(--color-orange-20)}._size-lg_cxg1w_148{--select-height: var(--height-48);--select-padding-bottom: var(--spacing-16);--select-padding-left: var(--spacing-12);--select-padding-right: var(--spacing-12);--select-padding-top: var(--spacing-16)}._size-md_cxg1w_155{--select-height: var(--height-40);--select-padding-bottom: var(--spacing-12);--select-padding-left: var(--spacing-12);--select-padding-right: var(--spacing-12);--select-padding-top: var(--spacing-12)}._size-sm_cxg1w_162{--select-height: var(--height-32);--select-padding-bottom: var(--spacing-8);--select-padding-left: var(--spacing-12);--select-padding-right: var(--spacing-12);--select-padding-top: var(--spacing-8)}._size-xs_cxg1w_11{--select-height: var(--height-24);--select-padding-bottom: var(--spacing-4);--select-padding-left: var(--spacing-8);--select-padding-right: var(--spacing-8);--select-padding-top: var(--spacing-4);--select-icon-size: .75rem}._icon-wrapper_cxg1w_177{position:absolute;top:0;left:var(--icon-placement-left, auto);right:var(--icon-placement-right, auto);bottom:0;display:flex;justify-content:center;align-items:center;pointer-events:none;transition-property:all;transition-timing-function:var(--timing-primary);transition-duration:var(--duration-medium);color:var(--color-neutral-90)}._icon-wrapper_cxg1w_177._icon-placement-left_cxg1w_80{--icon-placement-left: var(--spacing-md)}._icon-wrapper_cxg1w_177._icon-placement-left_cxg1w_80._size-xs_cxg1w_11{--icon-placement-left: var(--spacing-sm)}._icon-wrapper_cxg1w_177._icon-placement-right_cxg1w_45{--icon-placement-right: var(--spacing-md)}._icon-wrapper_cxg1w_177._icon-placement-right_cxg1w_45._size-xs_cxg1w_11{--icon-placement-right: var(--spacing-sm)}._icon-wrapper_cxg1w_177>button{pointer-events:auto}._wrapper_cxg1w_208{position:relative;width:100%}._wrapper_cxg1w_208._disabled_cxg1w_212 ._icon-wrapper_cxg1w_177{color:var(--color-beige-60)}._menu_cxg1w_215{max-height:9.6875rem;background-color:var(--color-neutral-10);border-color:var(--color-neutral-30);border-radius:var(--radius-md);border-style:solid;border-width:var(--border-width-sm);color:var(--color-neutral-90);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-16);outline:none;position:absolute;z-index:2;right:0;left:0;margin:0;margin-top:var(--spacing-md);padding:0;transition-property:all;transition-timing-function:var(--timing-primary);transition-duration:var(--duration-medium);overflow:auto;-webkit-overflow-scrolling:touch}._menu_cxg1w_215:hover>*{cursor:pointer}._item_cxg1w_243{color:var(--item-text-color, var(--color-beige-70));cursor:var(--item-cursor, default);padding:var(--spacing-md);list-style:none;text-decoration:none;font-size:var(--font-size-sm);transition-property:background;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._item_cxg1w_243._highlighted_cxg1w_257{background-color:var(--color-beige-20)}._item_cxg1w_243._selected_cxg1w_260:not(._multiple_cxg1w_260){--item-text-color: var(--color-neutral-90);font-weight:var(--font-weight-bold)}._item_cxg1w_243._selected_cxg1w_260._multiple_cxg1w_260:not(._allowUnselectFromList_cxg1w_264){--item-text-color: var(--color-beige-40);--item-cursor: not-allowed}._item_cxg1w_243._disabled_cxg1w_212{--item-text-color: var(--color-beige-60);--item-cursor: not-allowed}._tags_cxg1w_272{margin-top:var(--spacing-lg)}._tags_cxg1w_272 ._styled-tag_cxg1w_275:not(:last-child){margin-right:var(--spacing-sm);margin-bottom:var(--spacing-sm)}._tags_cxg1w_272:empty{display:none}}