/* =========================
   Select
========================= */

@use "../kit-deps" as *;

.select-wrap {
  position: relative;
  width: 100%;

  &::after {
    content: "";
    position: absolute;
    right: $space-4;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border: solid $neutral-700;
    border-width: 0 2px 2px 0;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: $space-8;
    cursor: pointer;

    &::-ms-expand {
      display: none;
    }

    option {
      color: $neutral-900;
      background-color: $neutral-0;
    }
  }
}