/* Shared between the home selector (.select-box) and the widget selector (.select-box-n). */
.select-box,
.select-box-n {
  position: relative;
  width: 100%;
}

.select-box input,
.select-box-n input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: none;
  outline: none;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

input[type="tel"],
.numberInputWhatsapp {
  border-radius: 0 0.5rem 0.5rem 0;
}

.select-box input:focus,
.select-box-n input:focus {
  box-shadow: inset 0 0 0 1px hsl(var(--ring));
}

.selected-option,
.floater-selected-option {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-option > div,
.floater-selected-option > div {
  position: relative;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.selected-option > div::after,
.floater-selected-option > div::after {
  position: absolute;
  content: "";
  right: 0.9rem;
  top: 50%;
  transform: translateY(-75%) rotate(45deg);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid hsl(var(--muted-foreground));
  border-bottom: 2px solid hsl(var(--muted-foreground));
  transition: transform 0.2s;
}

.selected-option > div.active::after,
.floater-selected-option > div.active::after {
  transform: translateY(-25%) rotate(225deg);
}

.selected-option svg,
.selected-option .iconify,
.floater-selected-option svg,
.floater-selected-option .iconify {
  width: 1.25rem;
  height: auto;
}

.select-box .options,
.select-box-n .choices {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  background-color: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  display: none;
  z-index: 50;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.select-box .options.active,
.select-box-n .choices.active {
  display: block;
}

input.search-box,
input.query-box {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

input.search-box::placeholder,
input.query-box::placeholder {
  color: hsl(var(--muted-foreground));
}

.select-box ol,
.select-box-n ol {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
}

.select-box ol::-webkit-scrollbar,
.select-box-n ol::-webkit-scrollbar {
  width: 0.5rem;
}

.select-box ol::-webkit-scrollbar-thumb,
.select-box-n ol::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.4);
  border-radius: 0.25rem;
}

.select-box ol li,
.select-box-n ol li {
  padding: 0.625rem 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.select-box ol li > div,
.select-box-n ol li > div {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
}

.select-box ol li .iconify,
.select-box-n ol li .iconify {
  width: 1.25rem;
  height: auto;
  flex-shrink: 0;
}

.select-box ol li .country-name,
.select-box-n ol li .country-name {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-box ol li strong,
.select-box-n ol li strong {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.select-box ol li.hide,
.select-box-n ol li.hide {
  display: none;
}

.select-box ol li:not(:last-child),
.select-box-n ol li:not(:last-child) {
  border-bottom: 1px solid hsl(var(--border));
}

.select-box ol li:hover,
.select-box-n ol li:hover {
  background-color: hsl(var(--muted));
}