@import '../../../style_config/config';

.JDselect {
  text-align:left;


  &--menuItem-centerlize {
    .react-select__option {
      padding: 0px!important;
      text-align: center;  
    }
  }

  .css-1g6gooi {
    width: 1px;
  }
  &--autoSize {
    .react-select__value-container {
      & > div:first-child {
        position: relative!important;
        top: 0!important;
        transform: none!important;
      }
    }
  }

  html &--border-primary {
    .react-select-container {
      .react-select__control {
        border-color: $primary-color;
      }
    }
  }

  &--unDisplayArrow {
    .react-select__indicator {
      display: none;
    }
  }

  &--bg {
    .react-select__control {
      background-color: white!important;
    }
  }


  &--menuCanOverflow {
    .react-select__menu {
      width: auto!important;
    }
  }

  // NO 옵션
  .react-select__menu-Notice--no-options {
    color: $selcet-placeholder-color;
  }

  font-size: $typho-normal;

  .JDselect__label {
    font-size: $label-font-size;
    color: $label-font-color;

    &--top {
      display: inline-block;
      margin: $standard-label-margin;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      vertical-align:top;
    }

    &--right {
      line-height: $select-height;
      padding-left: $standard-small-space;
    }
  }
  // disabled style 디스에이블 스타일 1
  &--disabled {
  .JDselect__label{
    color:$select-disabled-color;
  }
}
  
  .react-select-container {

    .react-select {
      
      &__placeholder {
        padding-right: 0!important;
      }

      // disabled style 디스에이블 스타일 2
      &__control--is-disabled.react-select__control {
        border-color: $select-disabled-color;
        .react-select__placeholder{
          color: $select-disabled-color;
        }
        // 화살표 
        .react-select__indicator {
          color: $select-disabled-color;
        }
      }

      &__single-value {
        width: 100%;
        margin: 0;
      }

      &__label {
        color: $select-multi-color;
        font-size: $typho-small;
      }

      
      &__multi-value {
        background-color:$select-multi-bgcolor;

          &__remove {
            background-color: $select-multi-remove-bgcolor;
            
            &:hover {
              background-color: $select-multi-remove-hover-bgcolor;
              color: $select-multi-remove-hover-color;
            }
          }
          
      }

      &__placeholder {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        color: $selcet-placeholder-color;
        padding-right: $standard-small-space;
        width: calc(100% - #{$standard-small-space});
        margin: 0;
      }
      

      //아이콘 이전 라인
      &__indicator {
        color: $html-color;
        padding: $select-padding;
      }

      &__indicator:hover {
        color: $grey-level3;
      }

      &__indicator-separator {
        display: none;
      }

      &-container {
        border-radius: $select-radius;
      }

      

      &__control {
        flex-wrap: inherit;
        border: $select-border;
        background-color: $select-background;
        border-radius: $select-radius;
        min-height: $select-height;


        &--is-focused {
          border-color: $select-focus-border-color;
          @extend %z-depth-1;
        }
      }

      &__value-container {
        padding: $select-padding
      }

      //  메뉴 Wrap
      &__menu {
        border-radius: $select-menue-radius;
        @extend %z-depth-2;
        margin: 0;
        width: 100%;
      }
      
      //  메뉴 
      &__menu-list {
        padding: 0;
        @extend %JDscrollbar;
      }

      // this is a li !!! 😆
      &__option {
        overflow:hidden;
        height: $select-option-height;
        padding: $select-option-padding;
        line-height: $select-option-height;
        width: auto;
        white-space: pre;
        &--is-focused {
          background-color: $select-option-hover-bgcolor;
        }

        &:hover {
          background-color: $select-option-hover-bgcolor;
        }

        &:active {
          background-color: $select-option-active-bgcolor;
        }

        &--is-selected {
          background-color: $select-option-selected-bgcolor;

          &:hover {
            background-color: $select-option-selected-bgcolor;
          }
        }
      }
    }
  }

  &--small {
    display:flex;
    font-size: $typho-small;

    .react-select-container {
      width:100%;
      .react-select__control{
        padding: 0rem $standard-small-space/2;
      }
      .react-select__value-container {
        padding: 0;
      }
      .react-select {
        .css-bgvzuu-indicatorSeparator {
          width: 0px;
        }
        &__placeholder {
          width: 100%;
          overflow:hidden;
          text-overflow: clip;
        }
        
        &__indicators {
          display:none;
          // .react-select__indicator  {
          //   margin-left: $standard-small-space;
          // }
          // width: 0;
        }
      }
    }
  }

  &--textOverflowVisible {
    .react-select__placeholder,
    .react-select__single-value {
      overflow:visible!important;
    }
  }
}