@import 'mixins/overwrite';

$dropdown-item-height: 32px;

@mixin dropdown-popup() {
  position: fixed;
  background-color: var(--#{$rd-prefix}background-color);
  border-radius: var(--#{$rd-prefix}border-radius);
  box-shadow: var(--#{$rd-prefix}shadow-popup);
}

@mixin dropdown-list() {
  min-width: 120px;
  max-height: calc(8px + #{$dropdown-item-height} * 6);
  padding: 4px 0;
  margin: 0;
  overflow: hidden auto;
  list-style: none;
}

@include b(dropdown) {
  @include dropdown-popup;

  @include e(arrow) {
    position: absolute;
    width: 6px;
    height: 6px;
    pointer-events: none;
    background-color: inherit;
  }

  @include e(list) {
    @include dropdown-list;
  }

  @include e(empty) {
    display: flex;
    align-items: center;
    width: 100%;
    height: $dropdown-item-height;
    padding: 0 12px;
    color: var(--#{$rd-prefix}color-disabled);
  }

  @include e(item) {
    position: relative;
    display: flex;
    align-items: center;
    height: $dropdown-item-height;
    margin: 0;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--#{$rd-prefix}animation-duration-base) linear;

    &:hover {
      background-color: var(--#{$rd-prefix}background-color-hover);
    }

    @include when(disabled) {
      color: var(--#{$rd-prefix}color-disabled);
      pointer-events: none;
    }

    @include m(basic) {
      padding: 0 12px;
    }

    @include m(sub) {
      padding: 0 24px 0 12px;

      @include when(expand) {
        background-color: var(--#{$rd-prefix}background-color-hover);
      }
    }
  }

  @include e(item-icon) {
    width: calc(1.1em + 8px);
    font-size: 1.1em;
  }

  @include e(item-content) {
    @include utils-ellipsis;
  }

  @include e(sub-popup) {
    @include dropdown-popup;
    @include dropdown-list;
  }

  @include e(sub-arrow) {
    @include overwrite-component(icon) {
      position: absolute;
      right: 6px;
      display: inline-flex;
      align-items: center;
      height: 100%;
    }
  }

  @include e(group-list) {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @include e(group-title) {
    @include utils-ellipsis;

    position: relative;
    display: flex;
    align-items: center;
    height: $dropdown-item-height;
    padding: 0 12px;
    margin: 0;
    font-size: 0.9em;
    color: var(--#{$rd-prefix}text-color-sub);
  }
}