@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

// $cascader: () !default;
// $cascader: map.merge(
//   (
//     'menu-text-color': getCssVar('text-color-main'),
//     'menu-selected-text-color': getCssVar('color-primary'),
//     'menu-fill': getCssVar('color-overlay'),
//     'menu-font-size': getCssVar('font-size-base'),
//     'menu-radius': getCssVar('border-radius-base'),
//     'menu-border': solid 1px getCssVar('border-color-light'),
//     'menu-shadow': getCssVar('box-shadow-light'),
//     'node-background-hover': getCssVar('fill-color', 'light'),
//     'node-color-disabled': getCssVar('text-color-placeholder'),
//     'color-empty': getCssVar('text-color-placeholder'),
//     'tag-background': getCssVar('fill-color'),
//   ),
//   $cascader
// );

@include b(cascader) {
  display: block;
  position: relative;
  outline: none;

  .#{$namespace}-input {
    cursor: pointer;

    .#{$namespace}-input__inner {
      text-overflow: ellipsis;
      cursor: pointer;

      &::selection {
        outline: none;
      }
    }
  }

  .icon-action-down {
    transition: transform getCssVar('transition-duration', 'fast');

    @include when(reverse) {
      transform: rotateZ(180deg);
    }
  }

  @include e(dropdown) {
    @include picker-popper(
      getCssVar('color-white'),
      1px solid getCssVar('color-neutral-2'),
      getCssVar('box-shadow-lv2')
    );

    &.#{$namespace}-popper {
      box-shadow: getCssVar('box-shadow-lv2');
    }
  }

  @include e(tags) {
    position: absolute;
    left: 6px;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;

    .#{$namespace}-tag {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      margin: 2px 0 2px 2px;
      text-overflow: ellipsis;
      color: getCssVar('color-neutral-9');
      background-color: getCssVar('color-neutral-3');

      &:not(.is-hit) {
        border-color: transparent;
      }

      > span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .#{$namespace}-tag__close {
        color: getCssVar('color-neutral-7');

        &:hover {
          color: getCssVar('color-white');
          background-color: getCssVar('color-primary-3');
        }
      }
    }
  }

  @include e(collapse-tags) {
    white-space: normal;
    z-index: getCssVar('index-normal');
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  @include e(collapse-tag) {
    line-height: inherit;
    height: inherit;
    display: flex;
  }

  @include e(suggestion-panel) {
    border-radius: getCssVar('border-radius-md');
  }

  @include e(suggestion-list) {
    max-height: 204px;
    margin: 0;
    padding: 8px;
  }

  @include e(suggestion-item) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-radius: getCssVar('border-radius-sm');

    &:hover,
    &:focus {
      color: getCssVar('color-primary-3');
      background-color: getCssVar('color-primary-1');
    }

    &.is-checked {
      color: getCssVar('color-primary-3');
    }

    > span {
      margin-right: 8px;
    }
  }

  @include e(empty-text) {
    margin: 12px 0;
    color: getCssVar('color-neutral-6');
  }

  @include e(search-input) {
    flex: 1;
    height: 24px;
    min-width: 60px;
    margin: 2px 0 2px 12px;
    padding: 0;
    color: getCssVar('color-neutral-9');
    border: none;
    outline: none;
    box-sizing: border-box;

    background: transparent;

    &::placeholder {
      // two input overlap
      color: transparent;
    }
  }
}