@import "~material-colors/dist/colors.scss";
$fancy-select-controls-border-width: 1px;
$fancy-select-controls-bg-color: $md-grey-50;
$fancy-select-controls-border-color: $md-grey-400;
$fancy-select-controls-dropdown-divider-color: $md-grey-300;
$fancy-select-multi-value-item-bg: $md-blue-50;

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  // box-sizing: border-box;
}

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }

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

.iconfont {
  font-size: 12px;
}

.icon-warning {
  color: orange;
  display: block;
}

@for $i from 0 through 9 {
  .fancy-select__indent-level-#{$i} {
    @if $i==0 {
      .fancy-select__treenode-container {
        padding-left: 5px;
      }
    } @else {
      .fancy-select__treenode-container {
        padding-left: 20px * $i;
      }

      .fancy-select__loading,
      .fancy-select__tip {
        padding-left: 20px * $i + 20px;
      }
    }
  }
}

.fancy-select {
  position: relative;
  text-align: left;

  div,
  span {
    box-sizing: border-box;
  }

  &__controls {
    padding-left: 5px;
    padding-right: 5px;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition-duration: 200ms;
    transition-property: border-color, box-shadow, width, height,
      background-color, opacity;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

    .fancy-select--open & {
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    }
  }

  &--single {
    .fancy-select__input-container {
      height: 100%;
      font-size: inherit;
    }

    .fancy-select__input {
      width: 100%;
      height: 100%;
    }

    .fancy-select__treenode--selected {
      font-weight: 600;

      background: $md-blue-50;
    }
  }

  &--isFocused {
    .fancy-select__single-value {
      color: $md-grey-100;
    }
  }

  &__value-container {
    width: 100%;
    vertical-align: middle;
    display: table-cell;
    position: relative;
  }

  &__internal-value-item-container,
  &__limit-tip {
    display: inline-block;
    padding-top: 5px;
    padding-right: 5px;
    vertical-align: top;
  }

  &__internal-value-item {
    display: inline-table;
    cursor: pointer;
    background: #e3f2fd;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #039be5;
    font-size: 12px;
    vertical-align: top;
  }

  &__internal-values-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  &__single-value,
  &__placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
    position: absolute;
    color: $md-grey-300;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 34px;
  }

  &__single-value {
    color: #333;
  }

  &__internal-value-label,
  &__internal-value-remove {
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    svg {
      width: 6px;
      height: 6px;
    }
  }

  &__internal-value-label {
    box-sizing: border-box;
    padding-right: 5px;
  }

  &__internal-value-remove {
    &:hover {
      color: #f60036;
    }

    padding-left: 5px;
    border-left: 1px solid #fff;
    color: #039be5;
    line-height: 0;
  }

  &--has-value {
    &.fancy-select--multi {
      .fancy-select__input-container {
        padding-left: 0;
      }

      .fancy-select__multi-value {
        margin-bottom: 5px;
      }

      .fancy-select__input-container {
        padding-top: 5px;
      }
    }
  }

  &--multi {
    .fancy-select__input-container {
      .fancy-select__input {
        padding-top: 3px;
        padding-bottom: 3px;
      }
    }
  }

  &__input-container {
    // width: 100%;
    // padding-top: 5px;
    display: inline-block;
    line-height: 0;
    padding-left: 5px;
  }

  &__internal-item {
    width: 40px;
    display: inline-block;
    background-color: #fff;
    border-color: #e0e0e0;
    border-radius: 2px;
  }

  &__input {
    line-height: inherit;
    max-width: 100%;
    width: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font-size: 12px;
  }

  &__sizer {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    height: 0;
    overflow: scroll;
    white-space: pre;
  }

  &__control-arrow-container,
  &__delete-icon-container {
    display: table-cell;
    vertical-align: middle;
    width: 20px;
    text-align: center;
    line-height: 0;
    color: $md-grey-400;
    cursor: pointer;
  }

  &__delete-icon-container {
    &:hover {
      color: #f60036;
    }
  }

  &__control-arrow-container {
    &--rotate {
      transform: rotate(-180deg);
    }

    &:hover {
      color: #464646;
    }
  }

  &__control-arrow,
  &__delete-icon {
    width: 9px;
    height: 9px;
  }

  &__dropdown {
    position: absolute;
    top: 100%;
    width: 100%;
    box-sizing: border-box;
    border: $fancy-select-controls-border-width solid
      $fancy-select-controls-border-color;
    background-color: #fff;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;

    .fancy-select--open & {
      margin-top: -$fancy-select-controls-border-width;
      border-top-color: $fancy-select-controls-dropdown-divider-color;
    }

    div {
      box-sizing: border-box;
    }

    .vue-recycle-scroller.direction-vertical:not(.page-mode) {
      max-height: 300px;
      position: relative;

      &:hover {
        &::-webkit-scrollbar {
          opacity: 1;
          display: block;
        }
      }

      &::-webkit-scrollbar {
        width: 8px;
        opacity: 0;
        display: none;
      }

      &::-webkit-scrollbar-track {
        background: $md-grey-100;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 10px rgba(144, 147, 153, 0.3);
      }
    }
  }

  &__treenode-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
  }

  &__treenode-arrow-container,
  &__treenode-arrow-placeholder {
    width: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 0;
    color: $md-grey-400;
  }

  &__treenode-arrow-container:hover {
    color: $md-grey-800;
  }

  &__label-container {
    vertical-align: middle;
    cursor: pointer;
    display: table;
    width: 100%;
    table-layout: fixed;
    color: inherit;
  }

  &__treenode-arrow {
    width: 9px;
    height: 9px;
    margin: 0 auto;
    vertical-align: middle;
    transform: rotate(-90deg);
  }

  &__treenode-arrow--rotated {
    transform: rotate(0deg);
  }

  & svg {
    fill: currentColor;
  }

  &__checkbox {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    z-index: 1;
    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

    &--checked {
      border-color: #039be5;
      background: #039be5;

      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(1);
        width: 3px;
        transition: transform 0.15s ease-in 0.05s;
        transform-origin: center;
      }
    }

    &--indeterminate {
      border-color: #039be5;
      background: #039be5;

      &::before {
        content: "";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 2px;
        transform: scale(0.5);
        left: 0;
        right: 0;
        top: 5px;
      }
    }

    &--unchecked {
      border-color: #e0e0e0;
      background-color: #fff;
    }
  }

  &__label {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    max-width: 100%;
    padding-left: 5px;
    white-space: nowrap;
  }

  &__treenode--hide {
    display: none;
  }

  &__treenode--isHighlighted {
    background: $md-grey-100;
  }

  &__tip,
  &__loading {
    padding-left: 5px;
    padding-right: 5px;
    display: table;
    table-layout: fixed;
    width: 100%;
    color: #757575;
    line-height: 180%;
  }

  &__tip-text,
  &__loading-text {
    font-size: 12px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
    width: 100%;
  }

  &__checkbox-container,
  &__icon-container {
    display: table-cell;
    width: 20px;
    vertical-align: middle;
    text-align: center;
    line-height: 0;
  }

  & .donut {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left-color: #039be5;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: donut-spin 1.2s linear infinite;
  }

  &__multi-value-item--transition {
    &-enter-active,
    &-leave-active {
      transition-duration: 200ms;
      transition-property: transform, opacity;
    }

    &-enter-active {
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    &-leave-active {
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      // trigger animation when element is removed
      position: absolute;
    }

    &-enter,
    &-leave-to {
      transform: scale(0.7);
      opacity: 0;
    }
  }

  &__limit-tip {
    &-text {
      cursor: default;
      border: 1px solid transparent;
      background: #039be5;
      font-size: 14px;
      border-radius: 2px;
      padding: 2px;
      color: #fff;
      display: inline-table;
    }
  }

  &--warning {
    display: inline-block;
    font-size: 14px;

    svg {
      margin-right: 5px;
    }
  }
}