@import "../../styles/global.scss";

.ai-select-container {
  outline: none;
  height: 100%;
  width: 100%;
  position: relative;

  .ai-select {
    @extend .flex-row;
    min-height: 40px;
    height: 100%;
    border-radius: 4px;
    border: 1px solid $color-core-grey-base;
    box-sizing: border-box;
    padding: $size-spacing-none $size-spacing-s;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    transition: 0.1s ease-in-out;

    &:focus {
      outline: none;
      box-shadow: $size-spacing-none $size-spacing-none $size-spacing-none 1px
        $color-core-blue-light;
    }

    .ai-select-options-selected-container {
      align-items: center;
      display: flex;
      flex: 1;
      flex-wrap: wrap;

      p {
        padding: $size-spacing-none;
        margin: $size-spacing-none $size-spacing-xxxs;
      }
    }

    .ai-select-label {
      margin: 2px;
    }

    .ai-select-label-disabled {
      color: $color-font-disabled;
    }

    .ai-select-placeholder-text {
      color: $color-font-disabled;
    }

    .ai-icon-search {
      color: $color-font-disabled;
      margin-right: $size-spacing-xxs;
    }

    .ai-arrow-down {
      color: $color-font-disabled;
      margin-left: $size-spacing-xxxs;
      font-size: 10px;
    }

    .ai-arrow-down-rotate-up {
      transform: rotateY(90);
    }

    .ai-arrow-down-rotate-down {
      transform: rotateY(180);
    }

    .ai-select-editable {
      @extend .flex-row;
      padding-left: 0;
      white-space: nowrap;
      height: 100%;
      width: fit-content;
      min-width: 1px;
      flex: 1;
      overflow: hidden;
      margin-left: $size-spacing-xxxs;
      align-items: center;
      overflow: hidden;
      border: none;
      br {
        display: none;
      }
      * {
        display: inline;
        white-space: nowrap;
      }
      &:focus {
        border: none;
        outline: none;
      }
    }
  }

  .ai-select-focused {
    outline: none;
    box-shadow: $size-spacing-none $size-spacing-none $size-spacing-none 1px
      $color-core-blue-light;
  }

  .ai-error-select {
    background-color: $color-core-red-lighter;
  }

  .ai-select-disabled {
    background-color: $color-core-grey-lighter;
    border: none;
    cursor: not-allowed;
  }
  .ai-select-dropdown {
    position: absolute;
    margin: $size-spacing-xxxs $size-spacing-none;
    z-index: 2;
    background-color: $color-core-white;
    transform-origin: 0% 0%;
    box-shadow: 0px 2px 6px $color-core-grey-light;
    border-radius: 4px;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;

    .ai-selected-option {
      background-color: $color-core-grey-lighter;
    }

    .ai-select-no-result-found {
      @extend .center;
      color: $color-core-grey-base;
    }
  }

  .ai-select-animation-enter {
    opacity: 0;
    transform: scaleY(0.75);
  }
  .ai-select-animation-enter-active {
    opacity: 1;
    transform: scaleY(1);
    transition: 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .ai-select-animation-exit {
    opacity: 1;
  }
  .ai-select-animation-exit-active {
    opacity: 0;
    transform: scaleY(0.75);
    transition: 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .ai-select-helper-error-message {
    color: $color-core-red-base;
    margin-top: 4px;
    font-size: 14px;
  }
}

.ai-select-option {
  @extend .flex-row;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: $size-spacing-none $size-spacing-s;
  cursor: pointer;
  width: 100%;

  &:active {
    background-color: $color-core-grey-lightest;
  }
  .ai-select-option-checkbox-container {
    margin-right: $size-spacing-xs;
  }

  .ai-select-option-avatar-container {
    margin-right: $size-spacing-xxs;
  }
}