@layer components.extended {
  :where(.field > select) {
    position: relative;

    /* Default arrow */
    &::picker-icon {
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      color: currentColor;
      content: "";
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }

    &:open {
      &::picker-icon {
        rotate: 180deg;
      }
    }

    /* Select popover */
    &::picker(select) {
      /* Animation on-stage styles */
      border: 0;
      box-shadow: var(--shadow-2);
      opacity: 1;
      padding: 0;
      scale: 1;

      /* Animation starting styles */
      @starting-style {
        opacity: 0;
        transform: scale(0.9);
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
      }
    }

    /* Animation off-stage styles */
    &:not(:open)::picker(select) {
      opacity: 0;
      scale: 0.9;
    }

    button {
      background-color: transparent;
      display: flex;
      inline-size: 100%;
      margin: 0;
      position: relative;

      selectedcontent {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .list {
      /* Groups */
      [role="group"] {
        label {
          background-color: light-dark(var(--gray-3), var(--gray-13));
          color: light-dark(
            oklch(from var(--text-color-1) calc(l * 0.75) c h),
            oklch(from var(--text-color-1) calc(l * 1.25) c h)
          );
          font-weight: 500;
          overflow: hidden;
          padding-inline: var(--size-2);
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:not(:first-child),
        option:first-of-type {
          margin-block-start: var(--size-2);
        }

        option:last-of-type,
        &:last-child {
          option:last-of-type {
            margin-block-end: 0;
          }
        }
      }

      /* Option */
      option {
        /* Checkmark */
        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
        &::check {
          display: none;
        }
        &::checkmark {
          display: none;
        }
        &::before {
          display: none;
        }

        &:focus-visible {
          outline-offset: -1px;
        }
      }
    }
  }

  :where(.field:has(> select)) {
    /* Size */
    &.small {
      button {
        padding-block: var(--size-1);
        padding-inline: var(--size-2) var(--size-7);

        &::after {
          inset-inline-end: var(--size-2);
        }
      }
    }

    /*
    * Non-experimental Select
    *
    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.field` class instead. Noting this down if an `:after` element would be needed on a `.field`.
    */
    &:not(:has(button)) {
      select {
        appearance: none;
      }

      /* Arrow */
      &::after {
        align-self: center;
        block-size: 0;
        border-block-start: 5px solid;
        border-inline: 5px solid transparent;
        content: "";
        display: inline-block;
        flex-shrink: 0;
        grid-column: 1/-1;
        grid-row: 1;
        inline-size: 0;
        inset-inline-end: var(--size-3);
        justify-self: end;
        pointer-events: none;
        position: relative;
      }
    }
  }

  select:has(button),
  ::picker(select) {
    appearance: base-select;
  }
}