@layer atoms {
  /*
   * Same shell as the text inputs in input.scss (Figma node 3037:31109), chevron is the Lucide
   * "chevron-down" glyph. The wrapping <div>'s "is-valid"/"is-invalid" modifiers from input.scss
   * recolor the border here too; the chevron stays, so no status icon is added.
   */
  select {
    appearance: none;
    border-radius: var(--border-radius-button);
    border: var(--border-default-width) solid var(--shade-grey-750);
    background-color: var(--shade-white);
    background-image: url(../../Images/input-chevron.svg);
    background-repeat: no-repeat;
    background-position: right var(--padding-button-l-r) center;
    background-size: 24px;
    width: 100%;
    padding: var(--padding-button-t-b) calc(var(--padding-button-l-r) * 2 + 24px) var(--padding-button-t-b) var(--padding-button-l-r);
    color: var(--body-text-color);
    font-size: var(--font-size-default);
    cursor: pointer;
  }
  select:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: 2px;
  }
  .is-valid select {
    border-color: var(--color-alert-green);
  }
  .is-invalid select {
    border-color: var(--color-alert-red);
  }
}