@layer components {
  /* Base: a wrapper giving the native select the same chrome as the combobox
  /* -------------------------------------------------------------------------- */

  .select {
    position: relative;

    .input {
      --input-padding: 0.5em 2em 0.5em 0.75em;

      appearance: none;
      cursor: pointer;
    }
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .select__chevron {
    --icon-size: 0.9em;

    color: var(--color-ink-muted);
    inset-block-start: 50%;
    inset-inline-end: 0.75em;
    position: absolute;
    translate: 0 -50%;
  }
}