@gits-id/multi-select/dist/style.css

Vue Multi Select Component

.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}:root{--v-multi-select-border-color: var(--v-input-border-color);--v-multi-select-bg-color: var(--v-input-bg-color);--v-multi-select-text-color: #1f2937;--v-multi-select-height: auto;--v-multi-select-placeholder-color: var(--v-input-placeholder-color);--v-multi-select-border-radius: var(--v-input-border-radius);--v-multi-select-padding-x: var(--v-input-padding-x);--v-multi-select-padding-y: var(--v-input-padding-y);--v-multi-select-font-size: var(--v-input-font-size);--v-multi-select-label-font-size: var(--v-input-label-font-size);--v-multi-select-label-font-weight: var(--v-input-label-font-weight);--v-multi-select-label-display: var(--v-input-label-display);--v-multi-select-label-margin-bottom: var(--v-input-label-margin-bottom);--v-multi-select-label-color: var(--v-input-label-color);--v-multi-select-item-font-size: 1rem;--v-multi-select-item-font-weight: 400;--v-multi-select-item-bg-color: #fff;--v-multi-select-item-text-color: #1f2937;--v-multi-select-item-padding-x: .75rem;--v-multi-select-item-padding-y: .5rem;--v-multi-select-item-hover-bg-color: #28A0F6;--v-multi-select-item-hover-text-color: #fff;--v-multi-select-error-border-color: #f43f5e;--v-multi-select-icon-color: #6b7280;--v-multi-select-check-icon-color: #28A0F6;--v-multi-select-dropdown-bg-color: #fff;--v-multi-select-dropdown-border-radius: .375rem;--v-multi-select-hint-font-size: var(--v-input-hint-font-size, 14px);--v-multi-select-hint-color: #6b7280;--v-multi-select-hint-margin-top: .25rem}.v-multi-select{background:var(--v-multi-select-bg-color);color:var(--v-multi-select-text-color);border-radius:var(--v-multi-select-border-radius);text-align:var(--v-multi-select-text-align);border:1px solid var(--v-multi-select-border-color);height:var(--v-multi-select-height);font-size:var(--v-multi-select-font-size);font-weight:var(--v-multi-select-font-weight);padding:var(--v-multi-select-padding-y) var(--v-multi-select-padding-x);position:relative}.v-multi-select--error{border-color:var(--v-multi-select-error-border-color)}.v-multi-select-error{border:1px solid var(--v-multi-select-error-border-color)}.v-multi-select-error:focus-visible{--tw-border-opacity: 1;border-color:rgb(244 63 94 / var(--tw-border-opacity));--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));--tw-ring-offset-color: #fda4af}.v-multi-select-normal{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.v-multi-select-normal:focus-visible{--tw-border-opacity: 1;border-color:rgb(40 160 246 / var(--tw-border-opacity));--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));--tw-ring-offset-color: #d1d5db}.v-multi-select-label{color:var(--v-multi-select-label-color);font-size:var(--v-multi-select-label-font-size);font-weight:var(--v-multi-select-label-font-weight);display:var(--v-multi-select-label-display);margin-bottom:var(--v-multi-select-label-margin-bottom)}.v-multi-select-input{display:flex;width:100%;cursor:default;flex-wrap:wrap;align-items:center;gap:.5rem;row-gap:.25rem;background-color:transparent}.v-multi-select-input:focus{outline:2px solid transparent;outline-offset:2px}.v-multi-select-input:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: .75;--tw-ring-offset-width: 2px}.v-multi-select-badges{display:flex;flex:1 1 0%;flex-wrap:wrap;align-items:center;gap:.5rem}.v-multi-select-dropdown{border-radius:var(--v-multi-select-dropdown-border-radius);background:var(--v-multi-select-dropdown-bg-color);position:absolute;left:0;right:0;z-index:10;margin-top:.75rem;max-height:15rem;width:100%;overflow:auto;padding-top:.25rem;padding-bottom:.25rem;padding-left:0;padding-right:0;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));--tw-ring-opacity: .05}.v-multi-select-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width: 640px){.v-multi-select-dropdown{font-size:.875rem;line-height:1.25rem}}.v-multi-select-input-control::-moz-placeholder{color:var(--v-select-placeholder-color)}.v-multi-select-input-control::placeholder{color:var(--v-select-placeholder-color)}.v-multi-select-input-control{color:var(--v-multi-select-text-color);min-width:0;max-width:100%;flex:1 1 0%;border-style:none;background-color:transparent;padding:.25rem;font-size:.875rem;line-height:1.25rem}.v-multi-select-input-control:focus{border-style:none;outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.v-multi-select-input-control:disabled{cursor:not-allowed}.v-multi-select-action{display:flex;align-items:center}.v-multi-select-item:hover{background:var(--v-multi-select-item-hover-bg-color);color:var(--v-multi-select-item-hover-text-color)}.v-multi-select-item{background:var(--v-multi-select-item-bg-color);color:var(--v-multi-select-item-text-color);font-size:var(--v-multi-select-item-font-size);font-weight:var(--v-multi-select-item-font-weight);padding:var(--v-multi-select-item-padding-y) var(--v-multi-select-item-padding-x);position:relative;display:flex;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:.5rem}.v-multi-select-item--focused{--tw-bg-opacity: 1;background-color:rgb(40 160 246 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.v-multi-select-dropdown-loading{padding:.5rem 1rem .5rem 1.5rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.v-multi-select-item-check{visibility:hidden;display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:hover .v-multi-select-item-check{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:focus .v-multi-select-item-check{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.v-multi-select-item--active .v-multi-select-item-check{color:var(--v-multi-select-check-icon-color);visibility:visible}.v-multi-select-item-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v-multi-select-icon{color:var(--v-multi-select-icon-color)}.v-multi-select-hint{font-size:var(--v-multi-select-hint-font-size);color:var(--v-multi-select-hint-color);margin-top:var(--v-multi-select-hint-margin-top)}.dark .v-multi-select{--v-multi-select-border-color: var(--v-input-border-color);--v-multi-select-border-radius: var(--v-input-border-radius);--v-multi-select-bg-color: var(--v-input-bg-color);--v-multi-select-placeholder-color: var(--v-input-placeholder-color);--v-multi-select-text-color: #262626;--v-multi-select-item-bg-color: #262626;--v-multi-select-item-text-color: #e5e5e5;--v-multi-select-item-hover-bg-color: #28A0F6;--v-multi-select-item-hover-text-color: #e5e5e5;--v-multi-select-error-border-color: #f43f5e;--v-multi-select-icon-color: #737373;--v-multi-select-dropdown-bg-color: #262626;--v-multi-select-hint-color: #737373}