@layer components {
  .rs-select {
    --rs-select-gap: var(--rs-unit-x2);
    --rs-select-radius: var(--rs-radius-small);
    --rs-select-chevron-size: var(--rs-unit-x4);
    --rs-select-p-v: var(--rs-unit-x2);
    --rs-select-font-size: var(--rs-font-size-body-3);
    --rs-select-line-height: var(--rs-line-height-body-3);
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--rs-select-radius);
    background: var(--rs-color-background-elevation-base);
    box-shadow: inset 0 0 0 1px var(--rs-color-border-neutral);
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-select:focus-within {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-primary);
  }

  .rs-select:has(select:user-invalid) {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-critical);
  }

  .rs-select:has(select:disabled) {
    background: var(--rs-color-background-disabled-faded);
    box-shadow: inset 0 0 0 1px var(--rs-color-border-disabled);
    color: var(--rs-color-foreground-disabled);
  }

  .rs-select[data-size="small"] {
    --rs-select-p-v: var(--rs-unit-x1);
  }

  .rs-select[data-size="large"] {
    --rs-select-gap: var(--rs-unit-x3);
    --rs-select-radius: var(--rs-radius-medium);
    --rs-select-chevron-size: var(--rs-unit-x5);
    --rs-select-p-v: var(--rs-unit-x3);
    --rs-select-font-size: var(--rs-font-size-body-2);
    --rs-select-line-height: var(--rs-line-height-body-2);
  }

  .rs-select[data-variant="faded"] {
    background: var(--rs-color-background-neutral-faded);
    box-shadow: none;
  }

  .rs-select > select {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: var(--rs-select-p-v)
      calc(
        var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 +
          var(--rs-unit-x1)
      )
      var(--rs-select-p-v) var(--rs-select-gap);
    font-family: var(--rs-font-family-body);
    font-size: var(--rs-select-font-size);
    font-weight: var(--rs-font-weight-regular);
    line-height: var(--rs-select-line-height);
    text-overflow: ellipsis;
  }

  .rs-select::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--rs-select-gap);
    inset-block-start: 50%;
    inline-size: var(--rs-select-chevron-size);
    block-size: var(--rs-select-chevron-size);
    background: var(--rs-color-foreground-neutral-faded);
    mask: var(--rs-icon-chevron-down) center / contain no-repeat;
    pointer-events: none;
    transform: translateY(-50%);
  }
}