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

  label {
    display: block;
    margin-bottom: 8px;
  }

  .select-display {
    border: 1px solid $light-grey;
    border-radius: 6px;
    background: $white;
    padding: 0 0 0 16px;
    height: 40px;
    cursor: pointer;
    @include display-flex(space-between, center);
    transition: all ease-in-out 0.3s;

    &__text {
      color: $black;
      font-size: 14px;
      line-height: 24px;
      transition: all ease-in-out 0.3s;
      @include display-flex(flex-start, center);
      white-space: nowrap;
      overflow: auto;
      @include hide-scrollbar;
    }

    &__multiple {
      border-right: 1px solid $light-grey;
      @include display-flex(space-between, flex-start);
      width: calc(100% - 40px);
      min-height: 40px;
      padding: 8px 12px 0 0;

      & > div {
        @include display-flex(initial, center);
      }
    }

    &__tags-container {
      max-width: calc(100% - 65px);
      overflow: hidden;

      &__expanded {
        overflow: unset;
        flex-wrap: wrap;
      }
    }

    &__tag {
      border: 1px solid $light-grey;
      background: $light;
      height: 24px;
      @include display-flex(space-between, center);
      color: $dark-grey;
      margin-right: 8px;
      margin-bottom: 8px;
      border-radius: 6px;
      padding: 0 8px;
      position: relative;

      span {
        line-height: 1;
      }

      &-text {
        max-width: 100px;
        @include ellipsis;
      }

      &-close {
        @include display-flex(initial, flex-start);
        width: 8px;
        cursor: pointer;
        margin-left: 8px;

        svg {
          path {
            fill: $dark-grey;
          }
        }
      }
    }

    &__count-container {
      flex-wrap: nowrap !important;
    }

    &__options {
      @include display-flex(initial, flex-start);
      cursor: pointer;
      margin-right: 12px;
      width: 16px;
    }

    &__count {
      margin: 0;
    }

    &__dropdown {
      height: 100%;
      padding: 0 12px;
      @include display-flex(initial, center);

      svg,
      img {
        width: 16px;

        path {
          transition: all ease-in-out 0.3s;
        }
      }
    }

    &-placeholder {
      .select-display__text {
        color: $grey;
      }

      .select-display__dropdown {
        svg {
          path {
            fill: $grey;
          }
        }
      }
    }
  }

  .select-items {
    position: absolute;
    min-width: 100%;
    background-color: $white;
    border-radius: 6px;
    overflow: auto;
    padding: 0;
    max-height: 300px;
    max-width: 100%;
    z-index: 100;
    box-shadow: $select-shadow;
    border: 1px solid $light-grey;

    li {
      padding: 8px 16px;
      color: $black;
      cursor: pointer;
      transition: all ease-in-out 0.3s;
      white-space: nowrap;
      @include display-flex(initial, center);
      font-size: 14px;
      line-height: 24px;
      letter-spacing: -0.01px;
      overflow: auto;
      @include hide-scrollbar;

      &:hover {
        background-color: $light;
      }

      &:last-child {
        margin-bottom: 8px;
      }
    }

    &__search {
      background-color: $light;
      padding: 16px 16px 8px;

      .input-container {
        min-width: auto;

        .input-display {
          background: transparent;

          .input-addon {
            border: 0;
          }
        }
      }
    }
    .empty-message {
      margin: 10px;
      text-align: center;
    }
    &__all {
      @include display-flex(space-between, center);
      background-color: $light;
      border-bottom: 1px solid $light-grey;
      margin-bottom: 8px;
      line-height: 18px !important;
      letter-spacing: -0.006px !important;
      color: $dark-grey !important;
      border-radius: 6px 6px 0 0;
      height: 48px;
      padding: 0 16px;

      & > div {
        @include display-flex(initial, center);
        cursor: pointer;

        .checkbox-container {
          margin-right: 16px;
          width: auto;

          label {
            margin-bottom: 0;
          }
        }
      }
    }

    &-label {
      @include display-flex(initial, center);

      &__icon {
        width: 16px;
        flex: 0 0 16px;
        @include display-flex(center, center);
        margin-right: 16px;
      }
    }

    &__multiselect-label {
      @include display-flex(initial, center);

      .checkbox-container {
        margin-right: 16px;
        pointer-events: none;

        label {
          margin-bottom: 0;
        }
      }
    }
  }

  .select-message {
    margin-top: 4px;
    position: absolute;

    &.error {
      color: $critical;
    }

    &.warning {
      color: $warning;
    }

    &.success {
      color: $success;
    }
  }

  &__focused {
    .select-display {
      border-color: $success;
      box-shadow: $input-shadow;
    }
  }

  &__error {
    .select-display {
      border-color: $critical;
      box-shadow: none;
    }
  }

  &__multiselect {
    .select-display {
      padding: 0 0 0 8px;
      min-height: 40px;
      height: auto;
    }
  }
}