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

.devui-dropdown-menu {
  &:not(.devui-dropdown-menu-cdk) {
    width: calc(100% + 2px);
    left: -1px;
    margin: 4px 0;
  }

  &.devui-custom-right,
  &.devui-custom-left,
  &.devui-custom-top {
    display: flex !important;

    & > .devui-dropdown-menu-wrap {
      display: inline-block;
    }

    & > .devui-select-custom-area {
      display: inline-block;
      overflow: auto;
    }

    &:not(.devui-custom-top) > .devui-dropdown-menu-wrap {
      width: calc(50% - 1px);
    }

    &:not(.devui-custom-top) > .devui-select-custom-area {
      width: 50%;
    }

    & > .devui-select-custom-area::before {
      display: none;
    }
  }

  &.devui-custom-top {
    flex-direction: column-reverse;
  }

  &.devui-custom-left > .devui-select-custom-area {
    border-right: 1px solid $devui-dividing-line;
    order: -1;
  }

  &.devui-custom-right > .devui-select-custom-area {
    border-left: 1px solid $devui-dividing-line;
  }

  &.devui-custom-top > .devui-select-custom-area {
    border-bottom: 1px solid $devui-dividing-line;
  }

  .devui-dropdown-menu-wrap {
    position: initial;

    &.limit-max-height {
      display: flex;
      flex-direction: column;
      max-height: 100%;
    }
  }
}

.devui-dropdown-menu-cdk {
  position: static;
  display: block;
  width: 100%;
}

.devui-form-group.devui-has-feedback[tabindex] {
  outline: none;
}

.devui-select-placeholder,
.devui-select-list-wrapper.devui-form-control,
.devui-select-selected-item-with-template {
  font-size: $devui-font-size;
}

.devui-form-group > input.devui-form-control.devui-select-input {
  cursor: pointer;
  padding-right: 2em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &.devui-select-search {
    padding-right: 2em;
    cursor: text;

    &.devui-search-filter {
      padding-right: 4em;
    }
  }
}

.devui-dropdown-item {
  clear: both;
  color: $devui-text;
  font-size: $devui-font-size;

  input[name='search'] {
    font-size: $devui-font-size;
  }
}

.devui-dropdown-item ::ng-deep .devui-select-checkbox {
  label {
    max-width: calc(100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.devui-select-lg {
  font-size: $devui-font-size-lg;
  min-height: 46px;
  line-height: 46px;

  .devui-form-control:not(.devui-select-list-wrapper) {
    height: 44px;
  }

  .devui-select-placeholder,
  .devui-select-list-wrapper.devui-form-control,
  .devui-select-selected-item-with-template {
    font-size: $devui-font-size-lg;
  }

  .devui-dropdown-item {
    font-size: $devui-font-size-lg;
    min-height: 40px;
    line-height: 28px;
    padding: 11px 10px;

    input[name='search'] {
      font-size: $devui-font-size-lg;
    }
  }

  ::ng-deep .devui-checkbox,
  ::ng-deep .devui-select-checkbox label,
  ::ng-deep .devui-select-checkbox label .checkbox-label {
    font-size: $devui-font-size-lg;
    height: 18px;
  }

  ::ng-deep .devui-checkbox-material {
    width: 16px;
    height: 16px;
  }
}

.devui-select-sm {
  font-size: $devui-font-size-sm;
  line-height: 14px;
  height: unset;

  &.devui-dropdown-origin:not(d-button):not(.icon):not([class^='icon-']) {
    min-height: 26px;
  }

  .devui-form-control:not(.devui-select-list-wrapper) {
    height: 24px;
  }

  .devui-select-placeholder,
  .devui-select-list-wrapper.devui-form-control,
  .devui-select-selected-item-with-template {
    font-size: $devui-font-size-sm;
  }

  .devui-dropdown-item {
    font-size: $devui-font-size-sm;
    min-height: 26px;
    line-height: 14px;

    input[name='search'] {
      font-size: $devui-font-size-sm;
    }
  }

  ::ng-deep .devui-select-checkbox label .checkbox-label {
    font-size: $devui-font-size-sm;
    line-height: 16px;
  }

  ::ng-deep .devui-checkbox-material {
    width: 12px;
    height: 12px;

    & > svg {
      width: 12px;
      height: 12px;
    }
  }
}

.devui-dropdown-menu-lg {
  .devui-dropdown-item {
    font-size: $devui-font-size-lg;
    min-height: 40px;
    line-height: 28px;

    input[name='search'] {
      font-size: $devui-font-size-lg;
    }
  }

  ::ng-deep .devui-checkbox,
  ::ng-deep .devui-select-checkbox label .checkbox-label {
    font-size: $devui-font-size-lg;
    line-height: 28px;
  }

  ::ng-deep .devui-checkbox-material {
    width: 16px;
    height: 16px;

    & > svg {
      width: 16px;
      height: 16px;
    }
  }
}

.devui-dropdown-menu-sm {
  .devui-dropdown-item {
    font-size: $devui-font-size-sm;
    min-height: 26px;
    line-height: 14px;

    input[name='search'] {
      font-size: $devui-font-size-sm;
    }
  }

  ::ng-deep .devui-select-checkbox label .checkbox-label {
    font-size: $devui-font-size-sm;
    line-height: 16px;
  }

  ::ng-deep .devui-checkbox-material {
    width: 12px;
    height: 12px;
  }
}

div.devui-dropdown-menu {
  // margin-bottom: 5px;
  cursor: pointer;
  min-width: auto;
  box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
}

div.devui-dropdown-menu .devui-select-list-unstyled,
div.devui-dropdown-menu > ul.devui-select-list-unstyled {
  & li:hover:not(.active):not(.disabled) {
    background-color: $devui-list-item-hover-bg;
    color: $devui-list-item-hover-text;
  }
}

div.devui-dropdown-menu .devui-select-list-unstyled li.selected,
div.devui-dropdown-menu > ul.devui-select-list-unstyled li.selected {
  background-color: $devui-list-item-hover-bg;
  color: $devui-list-item-hover-text;
}

div.devui-dropdown-menu:not(.devui-dropdown-menu-multiple) .devui-select-list-unstyled li.active,
div.devui-dropdown-menu:not(.devui-dropdown-menu-multiple) .devui-select-list-unstyled li.active:hover,
div.devui-dropdown-menu:not(.devui-dropdown-menu-multiple) > ul.devui-select-list-unstyled li.active,
div.devui-dropdown-menu:not(.devui-dropdown-menu-multiple) > ul.devui-select-list-unstyled li.active:hover {
  background-color: $devui-list-item-active-bg;
  color: $devui-list-item-active-text;
}

:host ::ng-deep .devui-dropdown-menu.devui-dropdown-menu-multiple .devui-select-list-unstyled li:not(.disabled):hover,
:host ::ng-deep .devui-dropdown-menu.devui-dropdown-menu-multiple > ul.devui-select-list-unstyled li:not(.disabled):hover {
  .devui-checkbox {
    & > label {
      color: $devui-list-item-hover-text;

      & > .devui-checkbox-material {
        border-color: $devui-form-control-line-active;
      }
    }
  }
}

div.devui-dropdown-menu.devui-dropdown-menu-multiple .devui-select-list-unstyled li.active:not(.disabled),
div.devui-dropdown-menu.devui-dropdown-menu-multiple > ul.devui-list-unstyled li.active:not(.disabled) {
  background-color: transparent;
  color: $devui-text;

  &:hover {
    background-color: $devui-list-item-hover-bg;
    color: $devui-list-item-hover-text;
  }
}

.devui-has-feedback {
  z-index: 1;
}

.devui-dropdown-menu ul.devui-dropdown-menu-wrap .devui-form-group.devui-has-feedback {
  & > input.devui-form-control.devui-select-search.devui-select-input {
    background-color: $devui-embed-search-bg;

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

    &:hover,
    &:hover:focus {
      background-color: $devui-form-control-bg;
      border-color: $devui-form-control-line-active;
    }

    &::placeholder {
      color: $devui-placeholder;
    }
  }
}

.devui-form-control,
.devui-form-group .devui-form-control {
  border-radius: $devui-border-radius;
  box-shadow: none;
}

.devui-select-underlined-border {
  border: 0;
  border-bottom: 1px solid $devui-line;
  border-radius: 0;
}

.devui-select-list-wrapper.devui-form-control {
  cursor: pointer;
  height: auto;
  margin: 0;
  padding: 0;
  padding-right: 30px;

  + .devui-form-control-feedback {
    height: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.devui-form-control {
  &.devui-select-input {
    line-height: 14px;
    height: 26px;
    border-color: transparent;
    outline: none;

    + .devui-form-control-feedback {
      height: 100%;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.devui-select-input-lg {
    line-height: 32px;
    // height: 44px;
  }

  &.devui-select-input-sm {
    line-height: 12px;
    // height: 24px;
  }
}

.devui-select-list-wrapper {
  .devui-select-selected-item-with-template {
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    cursor: pointer;
  }

  .devui-select-placeholder {
    height: 24px;
    line-height: 24px;
    color: $devui-placeholder;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
  }

  .devui-select-tag-list {
    height: 26px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
  }

  .devui-select-tag-list.normal {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .devui-select-tag-list.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .devui-select-tag-list.multiple-line {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.5;
    max-height: 48px;
  }

  .devui-select-tag-item {
    display: inline-block;
    margin: 2px 0 0 2px;

    &.disabled {
      background: $devui-disabled-bg;
      border-color: $devui-disabled-bg;
      cursor: not-allowed;
    }
  }

  .over-flow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
  }

  &.devui-select-input-lg {
    line-height: 1.5;

    .devui-select-selected-item-with-template,
    .devui-select-placeholder,
    .devui-select-tag-list {
      height: 42px;

      &.multiple-line {
        max-height: 74px;
        height: unset;
      }
    }

    .devui-select-selected-item-with-template,
    .devui-select-placeholder {
      line-height: 42px;
    }
  }

  &.devui-select-input-sm {
    line-height: 1.5;

    .devui-select-selected-item-with-template,
    .devui-select-placeholder,
    .devui-select-tag-list {
      height: 24px;

      &.multiple-line {
        max-height: 48px;
        height: unset;
      }
    }

    .devui-select-selected-item-with-template,
    .devui-select-placeholder {
      line-height: 22px;
    }
  }
}

.disabled .devui-select-list-wrapper .devui-select-tag-item span {
  padding-right: 0;
}

/* 选项disabled */
.devui-dropdown-item.disabled,
.devui-dropdown-item.disabled:hover,
div.devui-dropdown-menu li.disabled:hover,
div.devui-dropdown-menu .devui-select-list-unstyled li.disabled:hover,
div.devui-dropdown-menu > ul.devui-select-list-unstyled li.disabled:hover {
  cursor: not-allowed;
  color: $devui-disabled-text;
}

div.devui-dropdown-menu .devui-select-list-unstyled li.active.disabled,
div.devui-dropdown-menu > ul.devui-select-list-unstyled li.active.disabled,
div.devui-dropdown-menu .devui-select-list-unstyled li.active.disabled:hover,
div.devui-dropdown-menu > ul.devui-select-list-unstyled li.active.disabled:hover {
  background: $devui-disabled-bg;
  color: $devui-disabled-text;
}

/* checkbox的label灰化 */
:host ::ng-deep li.disabled .devui-checkbox.disabled label,
:host ::ng-deep .li.disabled .devui-checkbox.disabled label,
li.disabled ::ng-deep .devui-checkbox.disabled label,
li.disabled ::ng-deep .devui-checkbox.disabled label {
  color: $devui-disabled-text;
}

.devui-dropdown-origin.disabled,
.devui-dropdown-origin.disabled:hover {
  cursor: not-allowed;
  background-color: $devui-disabled-bg;
  border-color: $devui-disabled-line;
  color: $devui-disabled-text;

  .devui-select-list-wrapper.devui-form-control,
  .devui-form-control.devui-select-input {
    cursor: not-allowed;
    background-color: $devui-disabled-bg;
    color: $devui-disabled-text;
  }

  .devui-select-list-wrapper.devui-form-control.disabled {
    color: $devui-disabled-text;
  }

  &.devui-gray-style {
    background-color: $devui-disabled-bg !important;
    border-color: transparent !important;

    .devui-select-list-wrapper.devui-form-control,
    .devui-form-control.devui-select-input {
      background-color: $devui-disabled-bg !important;
      border-color: transparent !important;
    }
  }
}

.devui-dropdown-origin,
.devui-dropdown-origin:hover {
  &.disabled .devui-select-tag-list .devui-select-tag-item,
  .devui-select-tag-list .devui-select-tag-item.disabled {
    background-color: $devui-disabled-bg;
    border-color: $devui-disabled-line;

    & > span {
      color: $devui-disabled-text;
    }

    & > .devui-select-tag-remove-button {
      background-color: $devui-disabled-line;
    }
  }
}

.devui-select-list-wrapper.devui-form-control.disabled + .devui-form-control-feedback,
.devui-form-control.devui-select-input:disabled + .devui-form-control-feedback {
  cursor: not-allowed;
  background-color: $devui-disabled-bg;

  .devui-select-clear-icon svg path,
  .devui-select-chevron-icon svg path {
    fill: $devui-disabled-text;
  }
}

.devui-select-custom-area::before {
  display: block;
  content: '';
  width: calc(100% - 20px);
  margin: 0 10px;
  height: 1px;
  border-top: 1px solid $devui-dividing-line;
}

svg.svg-icon-search path {
  fill: $devui-icon-text;
}

.open .devui-select-chevron-icon {
  transform: rotate(180deg);
}

.devui-select-chevron-icon {
  display: inline-flex;
  vertical-align: middle;

  &-animation {
    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
  }
}

.devui-select-chevron-icon svg path {
  fill: $devui-icon-fill;
}

.disabled {
  .devui-select-chevron-icon svg path {
    fill: $devui-disabled-text;
  }
}

.devui-form-group.devui-has-feedback:hover {
  .devui-form-control-feedback.devui-clear-icon-show {
    .devui-select-chevron-icon {
      display: none;
    }

    .devui-select-clear-icon {
      display: inline-flex;
      vertical-align: middle;

      path {
        fill: $devui-shape-icon-fill-hover;
      }
    }
  }
}

.devui-form-group.devui-has-feedback > .devui-form-control-feedback.devui-search-clear,
.devui-form-control-feedback.devui-search-clear {
  right: 28px;
  cursor: pointer;
  pointer-events: initial;

  & > svg {
    vertical-align: middle;

    path {
      fill: $devui-shape-icon-fill;
    }
  }

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

  &::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    border-left: 1px solid $devui-line;
  }

  &.devui-search-clear-lg {
    right: 30px;
    width: 32px;
    height: 44px;
    line-height: 44px;
  }

  &.devui-search-clear-sm {
    right: 26px;
    width: 24px;
    height: 24px;
    line-height: 24px;
  }
}

.devui-select-clear-icon {
  width: 14px;
  height: 14px;
  display: none;
  transition: transform 0.2s ease;
  pointer-events: auto;
  cursor: pointer;

  path {
    fill: $devui-shape-icon-fill;
    transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
  }

  &:hover path {
    fill: $devui-shape-icon-fill-hover;
  }
}

.devui-form-control-feedback.devui-search-clear:hover g > g > polygon {
  fill: $devui-icon-fill-active;
}

input::-ms-clear {
  display: none;
}

.devui-dropup .devui-dropdown-menu {
  top: auto;
  bottom: 100%;
}

.devui-dropdown {
  height: unset;
}

:host ::ng-deep .devui-select-tag-item {
  max-width: 100%;

  d-tag {
    width: 100%;

    .devui-tag-item > span {
      vertical-align: top;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;
    }
  }

  &.disabled {
    line-height: 18px;

    d-tag .devui-tag-item {
      border: solid 1px $devui-disabled-line;
      line-height: 18px;
      background-color: $devui-disabled-bg;
      color: $devui-disabled-text;
      cursor: not-allowed;
    }
  }
}

.devui-gray-style {
  border-radius: $devui-border-radius;

  .devui-select-list-wrapper.devui-form-control {
    background-color: transparent;
  }
}

:host .devui-no-data-tip {
  border-radius: $devui-border-radius;
  padding: 12px;
}
