/* https://moderncss.dev/custom-select-styles-with-pure-css/ */

.kz-select {
  --select-border: var(--color-light);
  --select-border-radius: 6px;
}

/* Reset default styles, including removing the default dropdown arrow. */
.kz-select select {
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  width: 100%;
}

/* Re-add the padding to the select element, so that the entire area of the
 * custom select can be clicked to trigger the dropdown. */
.kz-select select {
  padding-block: var(--space-3xs);
  padding-inline: var(--space-xs);
}

/* Apply styles to the pseudo-select wrapper element. */
.kz-select {
  align-items: center;
  background-color: var(--color-light);
  border: 1px solid var(--select-border);
  border-radius: var(--select-border-radius);
  color: var(--color-dark);
  cursor: pointer;
  display: grid;
  font-family: var(--font-main);
  font-size: var(--step-0);
  grid-template-areas: 'select';
  line-height: var(--line-height-condensed);
}

/* Create a custom dropdown arrow. */
.kz-select::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 10L12 14L16 10' stroke='%23393939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: '';
  height: 1.5rem;
  justify-self: end;
  margin-inline-end: var(--space-xs);
  width: 1.5rem;
}

select,
.kz-select::after {
  grid-area: select;
}

.kz-select:has(> select[disabled]) {
  background-color: var(--color-light--shade-10);
  cursor: not-allowed;
}

.kz-select--error {
  --select-border: var(--color-utility-red);
}

.kz-select:focus-within {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--color-utility-orange);
  outline-offset: 2px;
}

.kz-select-error {
  color: var(--color-utility-red);
  line-height: var(--line-height-condensed);
  margin-block: var(--space-2xs) 0;
}