/*
 * The plugin's selects (the contact form's topic and order, a product set's options, back in stock's option): a
 * field the theme's way. The browser's own arrow sits against the field's edge and differs between browsers, so the
 * select draws none and its wrapper, `lanternwp-select`, draws a chevron inside the inline padding, with borders, so
 * it needs no icon from the theme; it dims with a disabled select. Each block sets only its size: the height, the
 * font size, and on the wrapper `--lanternwp-select-padding`, which both the text and the chevron keep from the edge,
 * and `--lanternwp-select-icon`, the chevron's size.
 * Hover and focus are the theme's field role: a `contrast` border, focused a 1px `contrast` ring.
 */
.lanternwp-select {
  position: relative;
  color: var(--wp--preset--color--contrast);

  &::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(
      var(--lanternwp-select-padding, var(--wp--preset--spacing--40)) + var(--wp--preset--spacing--10) / 2
    );
    width: var(--lanternwp-select-icon, 0.5rem);
    height: var(--lanternwp-select-icon, 0.5rem);
    border: solid currentcolor;
    border-width: 0 1.5px 1.5px 0;
    translate: 0 -75%;
    rotate: 45deg;
    pointer-events: none;
  }

  &:has(> select:disabled) {
    color: var(--wp--custom--color--disabled);
  }
}

.lanternwp-select > select {
  --lanternwp-select-end: calc(
    var(--lanternwp-select-padding, var(--wp--preset--spacing--40)) * 2 + var(--wp--preset--spacing--20)
  );

  box-sizing: border-box;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--lanternwp-select-padding, var(--wp--preset--spacing--40)) var(--lanternwp-select-end);
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius--field);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  transition:
    border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
    box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);

  &:disabled {
    border-color: var(--wp--custom--color--disabled);
    color: var(--wp--custom--color--disabled);
    cursor: default;
  }

  &:focus-visible:not([aria-invalid='true']) {
    border-color: var(--wp--preset--color--contrast);
    outline: none;
    box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
  }

  &[aria-invalid='true'] {
    border-color: var(--wp--preset--color--sale);
  }
}

@media (hover: hover) {
  .lanternwp-select > select:not(:disabled, [aria-invalid='true']):hover {
    border-color: var(--wp--preset--color--contrast);
  }
}