@import '../style/theme/color';
@import '../style/theme/corner';
@import '../style/core/_font';

.form-group label {
  cursor: pointer;
  font-size: $devui-font-size;
  margin-bottom: 0;
  width: 100%;
}

.multiple-label-auto-complete {
  padding: 0;
  font-weight: normal;
}

.multiple-label-auto-complete ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  background: $devui-base-bg;
  border-radius: $devui-border-radius;
  padding: 4px 4px 0 4px;
}

.multiple-label-auto-complete-single ul,
.multiple-label-auto-complete-single-focus ul,
.multiple-label-auto-complete-border ul,
.multiple-label-auto-complete-multiline ul {
  border: 1px solid $devui-line;

  &:hover {
    border-color: $devui-form-control-line-hover;
  }

  &:active {
    border-color: $devui-form-control-line-active;
  }
}

.multiple-label-auto-complete-single ul,
.multiple-label-auto-complete-single-focus ul {
  overflow: hidden;
}

.multiple-label-auto-complete-multiline ul {
  height: 60px;
  overflow: auto;
}

.multiple-label-auto-complete-none ul {
  border: 1px solid transparent;

  &:hover,
  &:active {
    border-color: transparent;
  }
}

.multiple-label-auto-complete {
  &:not(.multiple-label-auto-complete-disabled) {
    ul li:last-child {
      border-color: transparent;
    }
  }

  &.multiple-label-auto-complete-disabled ul {
    cursor: not-allowed;

    &,
    &:hover {
      border-color: $devui-disabled-line;
      background-color: $devui-disabled-bg;
    }

    li {
      border-color: $devui-disabled-line;

      .label-text {
        &,
        &:hover {
          background-color: $devui-disabled-bg;
          color: $devui-disabled-text;
        }
      }
    }
  }
}

.multiple-label-auto-complete ul::-ms-expand {
  border: 0;
  background-color: transparent;
}

::-ms-clear,
::-ms-reveal {
  display: none;
}

.multiple-label-auto-complete ul li {
  position: relative;
  display: inline-block;
  line-height: 1;
  margin: 0 4px 4px 0;
}

.multiple-label-auto-complete-none ul li {
  margin-right: 0;
}

.multiple-label-auto-complete-single ul li,
.multiple-label-auto-complete-single-focus ul li,
.multiple-label-auto-complete-multiline ul li {
  position: static;
}

.multiple-label-auto-complete-single ul li,
.multiple-label-auto-complete-single-focus ul li {
  float: left;
  width: 100%;
}

.multiple-label-auto-complete-single-focus ul li:first-child {
  max-width: calc(100% - 5px);
  margin-right: 0;
  width: auto;
}

.multiple-label-auto-complete-single-focus ul li:last-child {
  width: 5px;
  margin-right: 0;
  margin-left: 0;
}

.multiple-label-auto-complete ul li {
  .label-close,
  .label-text {
    font-size: $devui-font-size;
    line-height: 20px;
    padding: 0 8px;
    color: $devui-text-weak;
    font-weight: normal;
    background-color: $devui-label-bg;
  }

  .label-close {
    padding-left: 4px;
    display: flex;
    align-items: center;

    svg {
      rect {
        fill: $devui-line;
      }

      path {
        fill: $devui-light-text;
      }
    }

    &:hover {
      svg {
        rect {
          fill: $devui-icon-fill-active-hover;
        }
      }
    }
  }

  .label-text {
    &:hover {
      color: $devui-icon-fill-active-hover;
    }
  }
}

.multiple-label-auto-complete ul li .label-text {
  border-radius: $devui-border-radius 0 0 $devui-border-radius;
}

.multiple-label-auto-complete ul li .label-close {
  cursor: pointer;
  border-radius: 0 $devui-border-radius $devui-border-radius 0;
}

.multiple-label-auto-complete-single ul li .label-text,
.multiple-label-auto-complete-single-focus ul li .label-text,
.multiple-label-auto-complete-none ul li .label-text {
  background-color: transparent;
}

.multiple-label-auto-complete-single ul li .label-text {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  height: 20px;
  line-height: 20px;
}

.multiple-label-auto-complete-single-focus ul li .label-text {
  width: 100%;
  text-align: left;
  display: block;
  height: 20px;
  line-height: 20px;
}

.multiple-label-auto-complete .auto-complete-control {
  min-width: 160px;
  height: 20px;
  border: none;
  outline: none;
  background: $devui-base-bg;
  color: $devui-text;
}

.multiple-label-auto-complete .auto-complete-control:focus,
.multiple-label-auto-complete .auto-complete-control:hover {
  border: none;
  outline: none;
}

.multiple-label-auto-complete-none .auto-complete-control {
  width: 0;
}

:host label {
  color: inherit;
}

:host ::ng-deep .multiple-label-auto-complete-disabled {
  li {
    border: solid 1px $devui-disabled-line;
    border-radius: $devui-border-radius;

    d-tag .devui-tag-item {
      background-color: $devui-disabled-bg;
      color: $devui-disabled-text;
      cursor: not-allowed;
    }
  }
}

:host ::ng-deep .multiple-label-auto-complete-border ul li .devui-dropdown-menu {
  margin-top: 8px;
}

:host ::ng-deep .multiple-label-auto-complete-multiline ul li .devui-dropdown-menu {
  margin-top: 0;
  width: 170px;
}

:host-context(d-data-table) .multiple-label-auto-complete-single ul,
:host-context(d-data-table) .multiple-label-auto-complete-single ul li .auto-complete-control {
  border-color: transparent;
  background-color: transparent;
}

:host-context(d-data-table) .multiple-label-auto-complete-single ul {
  padding-left: 0;
}
