.select {
  position: relative;

  &__header {
    transition: all $transition-speed;
    cursor: pointer;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    padding: 0.2rem 1.6rem;
    width: 304px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.open {
      i {
        transform: rotate(180deg);
      }
    }
  }
  &__selected {
    font-size: 1.6rem;
    color: $black;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  &__options {
    &-wrapper {
      position: absolute;
      right: 0;
      left: 0;
      padding-top: 0.8rem;
      background-color: $white;
      z-index: 2;
      display: none;
      &.open {
        display: block;
      }
    }

    border: 1px solid $border-color;
    border-radius: $border-radius;
    width: 100%;
    padding: 0.6rem 0;
    max-height: 30rem;
    overflow: hidden;
    overflow-y: auto;
    > div {
      display: flex;
      justify-content: space-between;
      padding: 0.6rem 1.6rem;
      color: $black;
      cursor: pointer;
      &:hover {
        background-color: $gray;
      }
    }
  }
}