@import './var.less';

:root {
  --rv-dropdown-menu-height: @dropdown-menu-height;
  --rv-dropdown-menu-background-color: @dropdown-menu-background-color;
  --rv-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
  --rv-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
  --rv-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
  --rv-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
  --rv-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
  --rv-dropdown-menu-title-padding: @dropdown-menu-title-padding;
  --rv-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
  --rv-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
  --rv-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
  --rv-dropdown-item-z-index: @dropdown-item-z-index;
}

.@{rv-prefix}-dropdown-menu {
  user-select: none;

  &__bar {
    position: relative;
    display: flex;
    height: var(--rv-dropdown-menu-height);
    // background-color: var(--rv-dropdown-menu-background-color);
    // box-shadow: var(--rv-dropdown-menu-box-shadow);

    &--opened {
      z-index: calc(var(--rv-dropdown-item-z-index) + 1);
    }
  }

  &__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0; // hack for flex ellipsis
    cursor: pointer;

    &:active {
      opacity: var(--rv-active-opacity);
    }

    &--disabled {
      &:active {
        opacity: 1;
      }

      .@{rv-prefix}-dropdown-menu__title {
        color: var(--rv-dropdown-menu-title-disabled-text-color);
      }
    }
  }

  &__title {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--rv-dropdown-menu-title-padding);
    color: var(--rv-dropdown-menu-title-text-color);
    font-size: var(--rv-dropdown-menu-title-font-size);
    line-height: var(--rv-dropdown-menu-title-line-height);

    &::after {
      position: absolute;
      top: 50%;
      right: -4 * @hd;
      margin-top: -5 * @hd;
      border: 3 * @hd solid;
      border-color: transparent transparent var(--rv-gray-4) var(--rv-gray-4);
      transform: rotate(-45deg);
      opacity: 0.8;
      content: '';
    }

    &--active {
      color: var(--rv-dropdown-menu-title-active-text-color);

      &::after {
        border-color: transparent transparent currentColor currentColor;
      }
    }

    &--down {
      &::after {
        margin-top: -1px;
        transform: rotate(135deg);
      }
    }
  }
}

.@{rv-prefix}-dropdown-item {
  position: fixed;
  right: 0;
  left: 0;
  z-index: var(--rv-dropdown-item-z-index);
  overflow: hidden;

  &__icon {
    line-height: inherit;
    vertical-align: middle;
  }

  &__option {
    text-align: left;

    &--active {
      color: var(--rv-dropdown-menu-option-active-color);

      .@{rv-prefix}-dropdown-item__icon {
        color: var(--rv-dropdown-menu-option-active-color);
      }
    }
  }

  &--up {
    top: 0;
  }

  &--down {
    bottom: 0;
  }

  &__content {
    &.@{rv-prefix}-popup {
      position: absolute;
      max-height: var(--rv-dropdown-menu-content-max-height);
    }
  }
}