/* ----- barra de select ----- */
.select,
.select-2,
.select-3 {
  width: 300px;
  position: relative;
}

.select #selected-value,
.select-2 #selected-value-2,
.select-3 #selected-value-3  {
  margin-left: 1rem;
}

#category-select label {
  font-size: 0.75rem;
  letter-spacing: 0.0225rem;
}

#select-button {
  margin-top: .5rem;
  display: flex;
  padding: .3rem .7rem;
  align-items: center;
  justify-content: space-between;

  border-radius: 30px;
  background-color: var(--LIGHT-PURPLE);
}

#selected-value,
#selected-value-2,
#selected-value-3 {
  color: var(--RED);
  letter-spacing: 0.02625rem;
}

#chevrons svg {
  width: 2rem;
  height: 2rem;
}

#chevrons {
  color: var(--RED);
  width: 31.99px;
  height: 31.99px;
}

#chevrons [data-lucide="chevron-up"] {
  display: none;
}

#options-view-button:checked + #select-button #chevrons [data-lucide="chevron-down"],
#options-view-button-2:checked + #select-button #chevrons [data-lucide="chevron-down"],
#options-view-button-3:checked + #select-button #chevrons [data-lucide="chevron-down"] {
  display: none;
}

#options-view-button:checked + #select-button #chevrons [data-lucide="chevron-up"],
#options-view-button-2:checked + #select-button #chevrons [data-lucide="chevron-up"],
#options-view-button-3:checked + #select-button #chevrons [data-lucide="chevron-up"] {
  display: block;
}

#category-select {
  position: relative;
}

#options-view-button,
#options-view-button-2,
#options-view-button-3 {
  all: unset;

  position: absolute;
  inset: 0;

  cursor: pointer;
  z-index: 3;
}

#options {
  margin-top: .25rem;

  border-radius: 1rem;
  background-color: #b10830;

  display: none;
  
  width: 300px;
  position: absolute;
  z-index: 1;
}

/* ----- bloco de opcoes ----- */
.option,
.option-2,
.option-3 {
  display: flex;
  align-items: center;
  gap: .5rem;

  padding: .75rem 1rem;
  border-bottom: 1px dashed var(--WHITE);

  position: relative;
}

.option .label,
.option-2 .label,
.option-3 .label {
  color: var(--WHITE);
}

.option:has(input:checked),
.option:hover,
.option-2:has(input:checked),
.option-2:hover,
.option-3:has(input:checked),
.option-3:hover {
  background-color: #990024;
}

.option:first-child,
.option-2:first-child,
.option-3:first-child {
  border-radius: 1rem 1rem 0 0;
}

.option:last-child,
.option-2:last-child,
.option-3:last-child {
  border-radius: 0 0 1rem 1rem;
  border-bottom: 0;
}

.option:has(input:focus),
.option-2:has(input:focus),
.option-3:has(input:focus) {
  outline: 1px solid var(--WHITE);
  z-index: 1;
}

.option input[type="radio"],
.option-2 input[type="radio"],
.option-3 input[type="radio"] {
  all: unset;

  position: absolute;
  inset: 0;

  cursor: pointer;
}

#category-select:has(#options-view-button:checked) + #options,
#category-select:has(#options-view-button-2:checked) + #options,
#category-select:has(#options-view-button-3:checked) + #options {
  display: block;
}