/* Base wrapper */
.selectify {
  position: relative;
  width: 100%;
}

/* Hide native select */
.selectify select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Button */
.selectify__button {
  width: 100%;
  height: var(--field-h);
  padding: 0 40px 0 16px;
  border-radius: var(--radius);
  border: var(--field-border-w) solid var(--field-border);
  background: var(--input-bg);
  font-size: var(--font-size);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--control-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Arrow */
.selectify__button::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center / contain;
}

/* Dropdown */
.selectify__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--input-bg);
  border-radius: 16px; 
  border: var(--field-border-w) solid var(--field-border);
  box-shadow: var(--panel-shadow);
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
	 display: none;
	width: 400px;
}

/* Open */
.selectify[aria-expanded="true"] .selectify__list {
  display: block;
}

/* Option */
.selectify__option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: var(--font-size);
}

.selectify__option:hover,
.selectify__option[data-highlighted] {
  background: var(--primary);
  color: #fff;
}

.selectify:focus {
  outline: none;
}

.selectify[aria-expanded="true"] {
  outline: none;
}

.selectify__list:focus {
  outline: none;
}

.selectify {
  outline: none;
}

.selectify:focus {
  outline: none;
  box-shadow: none;
}

.selectify__button {
  outline: none;
}

.selectify__button:focus {
  outline: none;
}

.selectify__button:focus-visible {
  outline: none;
}

.selectify:focus,
.selectify:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}