@use 'sass:map';

@use './shared' as *;
@use './design' as *;
@use './input' as input;

$cascader: () !default;
$cascader: map.merge(
  (
    pane-height: 200px,
    pane-min-width: 180px,
    pane-max-width: 280px,
    pane-bg-color: value('bg-color-base'),
    pane-b-color: value('border-color-light-2'),
    pane-border: value('border-shape') value('cascader-pane-b-color'),
    pane-radius: value('radius-base'),
    pane-shadow: value('shadow-base'),
    check-color: value('color-primary-base'),
    empty-color: value('content-color-placeholder'),
    option-color-error: value('color-error-opacity-2')
  ),
  $cascader
);

.#{$namespace}-cascader {
  &-vars {
    @include define-preset-values('cascader', $cascader);
  }

  @include basis {
    display: inline-flex;
    width: 100%;
  }

  @include input.handler(#{&}__selector);

  &--multiple &__selector {
    @include define-css-var('input-v-padding', 2px);

    height: auto;
    min-height: value('input-height');
  }

  &__control,
  &__input {
    cursor: pointer;
    user-select: none;
  }

  &--multiple &__control {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    margin-top: -2px;
  }

  &__tags {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  &--responsive &__tags {
    display: flex;
    overflow: hidden;
  }

  &__selector &__tooltip {
    position: relative;
    height: calc(value('input-height') - 8px);

    .#{$namespace}-tooltip__trigger {
      display: flex;
    }
  }

  &__selector &__tag {
    position: relative;
    height: calc(value('input-height') - 8px);
    margin: 2px 4px;
    margin-inline-start: 0;
    font-size: 12px;
    pointer-events: auto;
    cursor: pointer;
  }

  &__selector--small &__tag {
    & > span {
      height: 100%;
      line-height: 1;
    }
  }

  // &__selector--large &__tag {
  //   height: 32px;
  // }

  &__selector &__tag + &__tag {
    margin-inline-start: 0;
  }

  &__rest-tip {
    display: flex;
    flex-wrap: wrap;

    .#{$namespace}-native-scroll {
      max-height: 180px;
    }
  }

  &__rest-tip &__tag {
    margin-inline-end: 0;
  }

  &__placeholder {
    position: absolute;
    overflow: hidden;
    color: value('input-placeholder-color');
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }

  &__panels {
    position: relative;
    display: flex;
    height: value('cascader-pane-height');
    background-color: value('cascader-pane-bg-color');
    border: value('cascader-pane-border');
    border-radius: value('cascader-pane-radius');
    box-shadow: value('cascader-pane-shadow');
    transition: width value('transition-base');

    &--empty {
      height: auto;
      padding: 5px 0;
    }
  }

  &__panel {
    display: inline-block;
    min-width: value('cascader-pane-min-width');
    max-width: value('cascader-pane-max-width');
    height: 100%;
    outline: 0;

    &:not(:first-child) {
      border-inline-start: value('cascader-pane-border');
    }
  }

  &__options {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;

    &--multiple .#{$namespace}-option--selected:not(.#{$namespace}-option--hitting),
    &--no-cascaded .#{$namespace}-option--selected {
      background-color: transparent;

      &:hover {
        background-color: value('option-bg-color-hover');
      }
    }

    .#{$namespace}-option--error {
      color: value('cascader-option-color-error');
    }
  }

  &__checkbox {
    display: inline-flex;
    margin-inline-end: 10px;
  }

  &__label {
    flex: auto;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &__selector--focused &__arrow {
    transform: rotate(180deg);
  }

  &__empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px 16px;
    color: value('cascader-empty-color');
    white-space: nowrap;
    cursor: default;
    background-color: value('cascader-pane-bg-color');
  }

  &__clear {
    @include clean-button;
  }
}