@import "./vars.pcss";

@keyframes selectLoadingIcon {
  0% {
    transform: rotate(0deg) translateZ(0);
  }

  100% {
    transform: rotate(360deg) translateZ(0);
  }
}

@keyframes selectMenuOpenFromTop {
  0% {
    transform: scaleY(0) translateZ(0);
    transform-origin: 0 100%;
    max-height: var(--formSelectMenuMaxHeight);
  }

  100% {
    transform: scaleY(1) translateZ(0);
    transform-origin: 0 100%;
    max-height: var(--formSelectMenuMaxHeight);
  }
}

@keyframes selectMenuOpenFromBtm {
  0% {
    max-height: 0;
  }

  100% {
    max-height: var(--formSelectMenuMaxHeight);
  }
}

.formSelect {
  height: var(--formSelectHeight);
  min-width: var(--formSelectMinWidth);
  width: var(--formSelectWidth);
  user-select: var(--formSelectUserSelect);
  position: var(--formSelectPosition);
  margin: var(--formSelectMargin);
  display: var(--formSelectDisplay);
  cursor: var(--formSelectCursor);
  color: var(--formSelectColor);
  text-align: var(--formSelectTextAlign);
  font-size: var(--formSelectFs);

  /* stylelint-disable */
  &&--isHover:not(&--isDisabled, &--isOpen),
  &&.isHover:not(&--isDisabled, &--isOpen),
  &&:hover:not(&--isDisabled, &--isOpen) {
    @media (hover: hover) {
      --formSelectBorder: var(--formSelectHoverBorder);
    }
  }
  /* stylelint-enable */

  &&.isOpen,
  &&--isOpen {
    --formSelectBorder: var(--formSelectOpenBorder);
  }

  &&--isMulti&--isValue {
    --formSelectMenuAnimation: unset;
  }

  &&--isMulti {

    /* stylelint-disable */
    .custom-select__control {
      overflow: hidden;
    }
    /* stylelint-enable */
  }

  &&--isSearchable {
    --formSelectCursor: text;
  }

  &&--isTop {
    --formSelectMenuAnimation: selectMenuOpenFromTop .25s;
    --formSelectMenuTop: calc(-100% - var(--formSelectHeight));
    --formSelectMenuBoxShadow: 0 -.5rem 1rem rgb(187, 193, 213, .4);
  }

  &&.isDisabled,
  &&--isDisabled {
    --formSelectCursor: var(--formSelectDisabledCursor);
    --formSelectIconOpacity: .25;

    /* stylelint-disable */
    .custom-select__control {
      background: var(--formSelectDisabledBg);
    }
    /* stylelint-enable */
  }

  /* stylelint-disable */
  &&--isCheckboxView {
    .formSelect__option {
      .checkbox,
      .radio {
        width: 100%;
        pointer-events: none;

        * {
          pointer-events: inherit;
        }

        &__label {
          flex-grow: 1;
        }
      }
    }
  }
  /* stylelint-enable */

  &&--isLiveSearcher {
    /* stylelint-disable */
    .custom-select__input-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 1em;
      width: calc(100% - 1em);
    }
    /* stylelint-enable */
  }


  &&.isInvalid,
  &&--isInvalid {
    --formSelectBorder: var(--formSelectInvalidBorder);
  }

  &__inner {
    width: 100%;
    display: flex;
  }

  &__input-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--formSelectPadding);
  }

  /* stylelint-disable scale-unlimited/declaration-strict-value */
  &__input {
    width: 100%;
    background: transparent;
    padding: 0;
    font: inherit;
    pointer-events: none;
    @mixin textOverflow;
  }

  &__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border: var(--formSelectBorder);
    border-radius: var(--formSelectBorderRadius);
    background: var(--formSelectBg);
    color: var(--formSelectColor);
    transition: var(--formSelectTransition);
  }

  &__value-container {
    display: flex;
    align-items: center;
    height: 100%;
    flex-grow: 1;
    padding: var(--formSelectPadding);
    overflow: hidden;
    position: relative;

    input[inputmode="none"] {
      left: 0;
      position: absolute;
    }

    &--is-multi {
      &::after {
        right: 0;
        top: 0;
        background: linear-gradient(to left, var(--formSelectBg), rgb(255, 255, 255, 0));
        height: var(--formSelectHeight);
        width: var(--formSelectHeight);
        content: "";
        position: absolute;
      }
    }
  }

  &__placeholder {
    display: block;
    line-height: var(--formSelectHeight);
    color: var(--formSelectPlaceholderColor);
    padding: var(--formSelectPadding);
    pointer-events: none;
    @mixin absCover;
    @mixin textOverflow;
  }

  &__single-value {
    position: absolute;
    display: block;
    max-width: 95%;
    @mixin textOverflow;

    /* stylelint-disable */
    .custom-select.is-open & {
      display: none;
    }
    /* stylelint-enable */
  }

  &__multi-value {
    display: flex;
    align-items: center;
    padding: var(--formSelectMultiValuePadding);
    border-radius: var(--formSelectMultiValueBorderRadius);
    background: var(--formSelectMultiValueBg);
    line-height: var(--formSelectMultiValueLineHeight);
    transition: var(--formSelectMultiValueTransition);
    position: relative;
    flex-shrink: 0;
    @mixin textOverflow;

    @mixin nlc {
      margin-right: var(--formSelectMultiValueMr);
    }

    &:hover {
      @media (hover: hover) {
        background: var(--formSelectMultiValueHoverBg);
      }
    }

    &__remove {
      margin-left: var(--formSelectMultiValueIconMl);

      &::before {
        content: "";
        @mixin absCover;
      }

      .icon {
        --iconSize: var(--formSelectMultiValueIconSize);
      }
    }
  }

  &__indicators {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
  }

  &__indicator {
    width: var(--formSelectHeight);
    height: var(--formSelectHeight);
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      --iconOpacity: var(--formSelectIconOpacity);
    }

    &--isClear {
      cursor: pointer;
    }

    &--isDropdown {
      .icon {
        --iconFill: transparent;

        /* stylelint-disable */
        .formSelect--isOpen & {
          --iconTransform: var(--formSelectOpenIconTransform);
        }
        /* stylelint-enable */
      }
    }

    &--isLoading {
      .icon {
        --iconAnimation: var(--formSelectLoadingIconAnimation);
      }
    }
  }

  &__menu {
    position: absolute;
    display: flex;
    top: var(--formSelectMenuTop);
    width: var(--formSelectMenuWidth);
    box-shadow: var(--formSelectMenuBoxShadow);
    border-radius: var(--formSelectMenuBorderRadius);
    background-color: var(--formSelectMenuBg);
    overflow: hidden;
    animation: var(--formSelectMenuAnimation);
    animation-play-state: paused;
    animation-fill-mode: forwards;
    z-index: var(--formSelectMenuZIndex);

    /* stylelint-disable */
    .formSelect.formSelect--isOpen & {
      @mixin customScrollbar;
      animation-play-state: running;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
    /* stylelint-enable */
  }

  &__group-heading,
  &__menu-notice,
  &__option {
    width: 100%;
    color: var(--formSelectOptionColor);
    font-weight: var(--formSelectOptionFontWeight);
    display: flex;
    align-items: center;
    position: relative;
    cursor: var(--formSelectOptionCursor);
    min-height: var(--formSelectOptionHeight);
    padding-left: var(--formSelectOptionPadding);
    padding-right: var(--formSelectOptionPadding);
    overflow-wrap: break-word;
    hyphens: auto;
    transition: var(--formSelectOptionTransition);
    background: var(--formSelectOptionBgColor);
  }

  &__group-heading {
    color: var(--formSelectGroupColor);
    font-weight: var(--formSelectGroupFontWeight);
    cursor: var(--formSelectGroupCursor);
    min-height: var(--formSelectGroupHeight);
    padding-left: var(--formSelectGroupPadding);
    padding-right: var(--formSelectGroupPadding);
    background: var(--formSelectGroupBgColor);
  }

  &__menu-notice,
  &__option {
    @mixin fc {
      padding-top: calc(var(--formSelectOptionPadding) / 2);
    }

    @mixin lc {
      padding-bottom: calc(var(--formSelectOptionPadding) / 2);
    }
  }

  &__option {
    &Content {
      pointer-events: none;
    }

    &--isHover,
    &.isHover,
    &:hover {
      background-color: var(--formSelectOptionHoverBgColor);
      color: var(--formSelectOptionHoverColor);
    }

    &.isActive,
    &--isActive,
    &--isSelected {
      background-color: var(--formSelectOptionActiveBgColor);
      color: var(--formSelectOptionActiveColor);
    }

    &--isLink {
      a {
        position: static;

        &::after {
          content: "";
          @mixin absCover;
        }
      }
    }

    &--isDisabled {
      background-color: var(--formSelectOptionDisabledBgColor);
      color: var(--formSelectOptionDisabledColor);
      cursor: var(--formSelectOptionDisabledCursor);
    }

    &-label {
      width: 100%;
    }
  }

  &__menu-list {
    width: 100%;
  }

  &__menu-notice {
    --formSelectOptionCursor: not-allowed;
  }

  &__group {
    position: relative;
  }
}