@import "variables";

.select2-container {
  .select2-choice {
    .select2-search-choice-close {
      display: none;
    }
    .select2-arrow {
      width: 22px;
      border: none;
      background-image: none;
      background-color: transparent;
    }
  }

  &.light {
    .select2-choice{
      background-color: #ffffff;
      font-weight: normal;
      border: 1px solid $spree-blue !important;
      color: $spree-blue !important;

      .select2-arrow {
        &:before {
          color: $spree-blue;
          font-size: 1rem;
          font-weight: 400;
          content: '\25be';
          display: inline;
        }
      }
    }

    &:hover, &.select2-container-active {
      .select2-choice{
        color: #ffffff !important;
        background-color: $spree-blue !important;

        .select2-arrow {
          &:before {
            color: #ffffff;
          }
        }
      }
    }
  }
}