/* public/ui/custom-select.css */

.cs {
   position: relative;
   width: 100%;
}

.cs__native {
   position: absolute !important;
   opacity: 0 !important;
   pointer-events: none !important;
   width: 1px !important;
   height: 1px !important;
   inset: 0 !important;
}

/* BOTÃO PRINCIPAL */

.cs__btn {
   width: 100%;
   height: 44px;

   border-radius: var(--r-md);
   border: 1px solid var(--border);
   background: transparent;
   color: var(--text);

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;

   padding: 10px 12px;

   cursor: pointer;
   user-select: none;

   /* evita estilo padrão do button */
   font: inherit;
   font-weight: 400;
}

.cs__btn:hover {
   background: var(--hover);
   border-color: transparent;
}

.cs__btn:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
}

.cs__value {
   min-width: 0;
   display: flex;
   align-items: center;
   gap: 8px;
}

.cs__text {
   font-size: 16px;
   font-weight: 400;

   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.cs__chev {
   font-size: 16px;
   opacity: .85;
   flex: 0 0 auto;
}

/* PAINEL DROPDOWN */

.cs__panel {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   right: 0;

   z-index: var(--z-dropdown);

   display: none;

   border: 1px solid var(--border);
   border-radius: var(--r-lg);

   background: var(--panel);
   box-shadow: var(--shadow);

   overflow: hidden;
}

.cs.is-open .cs__panel {
   display: block;
}

/* SEARCH */

.cs__search {
   padding: 10px;
   border-bottom: 1px solid var(--border);
   background: color-mix(in oklab, var(--panel), #fff 1%);
}

.cs__search .input {
   height: 38px;
}

/* LISTA */

.cs__list {
   list-style: none;
   margin: 0;
   padding: 6px;

   max-height: 260px;
   overflow: auto;

   display: grid;
   gap: 4px;
}

/* OPÇÕES */

.cs__opt {
   width: 100%;

   border: 0;
   background: transparent;
   color: var(--text);

   border-radius: 12px;

   padding: 9px 10px;

   cursor: pointer;
   text-align: left;

   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;

   font: inherit;
   font-size: 16px;
   font-weight: 400;
}

.cs__opt:hover {
   background: var(--hover);
}

.cs__opt:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
}

.cs__opt[aria-selected="true"] {
   background: color-mix(in oklab, var(--panel), var(--text) 5%);
}

.cs__opt span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* SEM RESULTADO */

.cs__empty {
   padding: 10px;
   margin: 6px;

   border-radius: 12px;
   border: 1px dashed var(--border);

   color: var(--muted);
   text-align: center;
}

/* MOBILE */

@media (max-width:520px) {
   .cs__panel {
      left: 0;
      right: 0;
   }
}