.blip-select {
  @include flex-box;
  flex-wrap: wrap;

  &:hover {
    border: 1px solid $bp-color-bot;
  }

  &.bp-input-wrapper--focus {
    box-shadow: 0 0 0 3px $bp-color-blip-light;
    transition: none;
  }

  &.bp-input-wrapper {
    background-color: $bp-color-white;
    cursor: pointer;

    &.large {
      height: 68px;
    }
  }

  &.bp-select-wrapper--invalid {
    border-color: $bp-color-warning;
    box-shadow: 0px 0px 1px 2px $bp-color-delete;

    label {
      color: $bp-color-delete;
    }

    &.bp-input-wrapper--focus {
      label {
        color: $bp-color-delete;
      }
    }
  }

  &.bp-select-wrapper--disabled {
    background-color: $bp-color-offwhite;
    border-color: $bp-color-breeze;
  }

  .blip-select__shell {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-content: center;
    align-items: center;

    .blip-select__content {
      width: 100%;
      text-align: justify;

      .bp-label {
        width: calc(100% - 20px);
      }
    }
  }

  .bp-select-hide-label {
    height: 0;
  }

  .bp-select-placeholder-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    margin-left: 6px;
    height: 36px;
    min-width: 36px;
    width: 36px;
    border-radius: 100%;

    img,
    svg {
      height: 100%;
      width: 100%;
      border-radius: 100%;
    }
  }

  .hide {
    display: none;
  }

  &.open {
    .blip-select__arrow-down {
      transform: rotate(180deg);
    }
  }
}

.blip-select__input {
  @include placeholder($bp-color-cloud);
  cursor: pointer;
  display: block;
  border: 0;
  background-color: transparent;
  outline: none;
  width: calc(100% - 20px);
  height: 1.9 * $m;
  margin-top: 0.2 * $m;
  padding-right: 20px;
  font-family: $bp-ff;
  font-size: $bp-fs-6;
  align-self: center;
  position: relative;
  z-index: 1;
  box-sizing: initial;

  &:focus {
    outline: none;
  }
}

.blip-select__arrow-down {
  position: absolute;
  right: 10px;
  visibility: hidden;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  transition: transform .3s;

  &.blip-select__show-arrow {
    visibility: visible;
  }
}

.blip-select__options {
  background: #fff;
  position: absolute;
  top: 108%;
  left: 0;
  width: 100%;
  border: 0.1 * $m solid $bp-color-breeze;
  border-radius: 0.8 * $m;
  box-shadow: 0 0.2 * $m 1.2 * $m 0 rgba(0, 0, 0, 0.1);
  transform-origin: top left;
  transform: scaleY(0);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.25s, opacity 0.75s, visibility 0.75s;
  z-index: 2;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 52px * 6;
    overflow-y: auto;

    @include scrollbar($bp-color-time);
  }
}

.blip-select__options--open-top {
  top: initial;
  bottom: 100%;
}

.blip-select__content-option {
  display: flex;
  flex-direction: column;

  .blip-select__content-option-label {
    font-weight: bold;
  }
}

.blip-select__option {
  padding: 0.8 * $m 1.7 * $m;
  color: $bp-color-city;
  margin-bottom: 0;
  cursor: pointer;
  word-break: break-word;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;

  &.blip-select__option--description-right {
    .blip-select__option__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-flow: row wrap;
      width: 100%;
    }

    .blip-select__option__label:not(:only-child) {
      width: 60%;
      display: flex;
      justify-content: flex-start;
    }

    .blip-select__option__description {
      width: 40%;
      display: block;
      text-align: right;
    }
  }

   &:not(.blip-select__option--disabled) {
    &:not(.blip-select__add-option) {
      &:hover,
      &:focus {
        background: $bp-color-whisper;
        outline: 0;

        .blip-select__option__label:not(:only-child) {
          color: $bp-color-bot;
        }
      }
    }
  }

  &.blip-select__empty-option {
    cursor: default;
    justify-content: center;
    padding: 25px 0;
  }

  .blip-select__option__label:not(:only-child) {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
  }

  .blip-select__option__description {
    margin-left: auto;
    flex-shrink: 0;
    font-size: $bp-fs-7;
    color: $bp-color-cloud;
    line-height: 100%;
  }
}

.blip-select__add-option {
  background: $bp-color-bot;
  border: 0;
  color: #fff;
  padding: 10px 0;
  justify-content: center;
  bottom: 0;
  border-radius: 0 0 0.8 * $m 0.8 * $m;

  &:hover,
  &:focus {
    background: $bp-color-blip-dark;
    outline: 0;
  }

  small {
    margin-right: 0.5 * $m;
    color: #fff;
  }

  div.blip-new-option-text {
    margin-top: -0.3 * $m;
  }
}

.blip-select__option--selected {
  background: $bp-color-whisper;

  .blip-select__option__label:not(:only-child) {
    color: $bp-color-bot;
  }
}

.blip-select__option--description-bottom {
  flex-wrap: wrap;

  .blip-select__option__description {
    margin-left: 0;
    font-size: $bp-fs-8;
  }
}

  .blip-select__option--disabled {
    outline-color: $bp-color-bot;
    cursor: no-drop;

    .blip-select__option__content {
      color: $bp-color-silver;
    }

    .blip-select__option__icon{
      position: relative;

      &:before {
        height: 36px;
        width: 36px;
        border-radius: 100%;
        position: absolute;
        background-image: url('data:image/svg+xml;charset=utf-8,<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M52.46 29.87H55.06C55.723 29.87 56.3589 30.1334 56.8278 30.6022C57.2966 31.0711 57.56 31.707 57.56 32.37V53.05C57.5547 55.5467 56.5605 57.9397 54.7951 59.7051C53.0296 61.4706 50.6367 62.4647 48.14 62.47H24.67C22.1715 62.4674 19.776 61.4744 18.0084 59.7086C16.2408 57.9429 15.2453 55.5485 15.24 53.05V32.37C15.24 31.707 15.5034 31.0711 15.9722 30.6022C16.4411 30.1334 17.0769 29.87 17.74 29.87H20.35V25.22C20.4545 21.0313 22.1919 17.0494 25.1914 14.1238C28.1909 11.1982 32.215 9.56073 36.405 9.56073C40.595 9.56073 44.6191 11.1982 47.6186 14.1238C50.6181 17.0494 52.3554 21.0313 52.46 25.22V29.87ZM28.7029 17.6152C26.6391 19.6179 25.4365 22.3456 25.35 25.22V29.87H47.46V25.22C47.3735 22.3456 46.1709 19.6179 44.1071 17.6152C42.0433 15.6126 39.2807 14.4925 36.405 14.4925C33.5293 14.4925 30.7666 15.6126 28.7029 17.6152ZM51.2654 56.1754C52.0943 55.3465 52.56 54.2223 52.56 53.05V34.87H20.24V53.05C20.2426 54.2232 20.7105 55.3474 21.541 56.176C22.3715 57.0047 23.4968 57.47 24.67 57.47H48.14C49.3122 57.47 50.4365 57.0043 51.2654 56.1754ZM38.7472 49.6837C38.0519 50.1462 37.2351 50.392 36.4 50.39C35.2825 50.3874 34.2117 49.9416 33.4225 49.1505C32.6332 48.3593 32.19 47.2875 32.19 46.17C32.19 45.3349 32.4378 44.5187 32.9019 43.8245C33.366 43.1303 34.0257 42.5894 34.7974 42.2703C35.5691 41.9512 36.4181 41.8682 37.237 42.0318C38.0558 42.1955 38.8078 42.5984 39.3975 43.1896C39.9873 43.7807 40.3884 44.5336 40.5501 45.3529C40.7118 46.1721 40.6268 47.0209 40.3059 47.7919C39.985 48.5628 39.4425 49.2212 38.7472 49.6837Z" fill="%23edf0ee"/> </svg>');
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
        background-color: $bp-color-suit;
        content: '';
        opacity: 0.9;
      }
    }
  }

.blip-select__option--with-icon {
  display: flex;
  align-items: center;
  width: 100%;

  .blip-select__option__icon {
    line-height: 0;
    height: 36px;
    width: 36px;
    border-radius: 100%;

    img,
    svg {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .blip-select__option__content {
    margin-left: 10px;

    span {
      display: block;
    }
  }
}