// @import "ivue-input";
// @import "ivue-select";
// @import "ivue-loading";

$name: 'ivue-cascader';
$input: 'ivue-input';

:root {
  --#{$name}-dropdown-padding: 5px 0;

  // transfer
  --#{$name}-dropdown-transfer-item-right: 24px;

  // list
  --#{$name}-dropdown-list-max-height: 190px;

  // item
  --#{$name}-dropdown-item-padding: 7px 21px;
  --#{$name}-dropdown-item-font-size: 14px;

  // item->icon
  --#{$name}-dropdown-item-icon-font-size: 18px;
  --#{$name}-dropdown-item-icon-right: 5px;

  // item->loading
  --#{$name}-dropdown-item-loading-size: 15px;

  // not-found
  --#{$name}-not-found-width: 200px;
  --#{$name}-not-found-padding: 10px;

  // label
  --#{$name}-label-line-height: 34px;
  --#{$name}-label-padding: 0 7px;
  --#{$name}-label-font-size: 14px;

  // arrow
  --#{$name}-arrow-font-size: 18px;

  // clearable
  --#{$name}-clearable-font-size: 18px;

  // menu
  --#{$name}-menu-min-width: 100px;
  --#{$name}-menu-height: 180px;
  --#{$name}-menu-padding: 5px 0;
}

.#{$name} {
  line-height: normal;
  position: relative;

  // 输入框外层
  &-input {
    display: inline-block;
    width: 100%;
    position: relative;
    cursor: pointer;

    // 下拉框第一个图标默认显示
    &:hover {
      .#{$name}-clearable {
        display: inline-block;
      }
    }
  }

  &-dropdown {
    padding: var(--#{$name}-dropdown-padding);

    &--transfer {
      width: auto;
      padding: 0;
      white-space: nowrap;
      overflow: visible;

      .#{$name}-menu--item {
        padding-right: var(--#{$name}-dropdown-transfer-item-right);
        transition: var(--ivue-all-transition);
      }
    }

    &--list {
      max-height: var(--#{$name}-dropdown-list-max-height);
      box-sizing: border-box;
      overflow: auto;
      min-width: 100%;
      list-style: none;
    }

    &--item {
      display: list-item;
      position: relative;
      margin: 0;
      padding: var(--#{$name}-dropdown-item-padding);
      clear: both;
      line-height: normal;
      font-size: var(--#{$name}-dropdown-item-font-size);
      list-style: none;
      cursor: pointer;
      word-break: break-all;
      align-items: center;
      color: var(--ivue-text-color);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        background: var(--ivue-background-color-select-hover);
      }

      &__disabled {
        color: var(--ivue-input-disabled-color) !important;
        cursor: var(--ivue-cursor-disabled);
      }

      span {
        color: var(--ivue-error-color);
      }
    }

    &-not-found {
      width: var(--#{$name}-not-found-width) !important;
    }
  }

  // label
  &-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: var(--#{$name}-label-line-height);
    padding: var(--#{$name}-label-padding);
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    font-size: var(--#{$name}-label-font-size);
  }

  // 显示清除图片
  &-show-clear {
    &:hover {
      .#{$name}-arrow {
        display: none;
      }

      .#{$name}-clearable {
        display: inline-block;
      }
    }
  }

  // 下拉图标
  .#{$name}-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: var(--#{$name}-arrow-font-size) !important;
    height: 100%;
    transition: var(--ivue-all-transition);
  }

  // 清除按钮
  .#{$name}-clearable {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: var(--#{$name}-clearable-font-size) !important;
    height: 100%;
    display: none;
  }

  // 输入框
  .#{$input} {
    cursor: pointer;
    border: none;
  }

  // 显示菜单
  &-visible {
    .#{$name}-arrow {
      transform: rotate(180deg);
      transform-origin: center center;
    }
  }

  .ivue-select-dropdown {
    width: auto;
    padding: 0;
    white-space: nowrap;
    overflow: visible;
  }

  // 菜单
  &-menu {
    display: inline-block;
    min-width: var(--#{$name}-menu-min-width);
    height: var(--#{$name}-menu-height);
    margin: 0;
    padding: var(--#{$name}-menu-padding) !important;
    vertical-align: top;
    list-style: none;
    border-right: 1px solid var(--ivue-border-multiple-color);
    overflow: auto;

    &:last-child {
      border-right-color: transparent;
      margin-right: -1px;
    }

    // 选项
    &--item {
      position: relative;
      margin: 0;
      line-height: normal;
      padding: var(--#{$name}-dropdown-item-padding);
      clear: both;
      color: var(--ivue-text-color);
      font-size: 14px !important;
      white-space: nowrap;
      list-style: none;
      cursor: pointer;
      transition: var(--ivue-all-transition);

      &:hover {
        background: var(--ivue-background-color-select-hover);
      }

      .ivue-icon {
        position: absolute;
        top: 0;
        right: var(--#{$name}-dropdown-item-icon-right);
        height: 100%;
        font-size: var(--#{$name}-dropdown-item-icon-font-size);
        width: auto;
        min-width: auto;
        transition: none;
      }

      // 激活
      &-active {
        color: var(--ivue-primary-color);
        background: var(--ivue-background-color-select-hover);
      }

      // 禁用
      &-disabled {
        color: var(--ivue-input-disabled-color);
        cursor: var(--ivue-cursor-disabled);

        &:hover {
          color: var(--ivue-input-disabled-color);
          background-color: var(--ivue-white-color);
          cursor: var(--ivue-cursor-disabled);
        }
      }

      // loading
      &-loading {
        position: absolute !important;
        width: var(--#{$name}-dropdown-item-loading-size);
        height: var(--#{$name}-dropdown-item-loading-size);
        right: var(--#{$name}-dropdown-item-icon-right);
        top: 0;
        bottom: 0;
        margin: auto 0;
        overflow: hidden;

        .ivue-loading-mask {
          background: none;
        }

        .circular {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 搜索空提示
  &-not-found {
    .ivue-select-dropdown {
      right: 0;
    }
  }

  // 没有数据提示
  &-not-found-tip {
    padding: var(--#{$name}-not-found-padding);
    text-align: center;
    color: var(--ivue-disabled-color);

    &-text {
      font-size: var(--#{$name}-dropdown-item-font-size);
    }
  }
}