@import "../../variable.less";
@import "../../mixins/index.less";
@import "./var.less";

.@{--css-prefix}-dropdown-menu-container {
  position: fixed;
  width: 100%;
}

@keyframes showPopup {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  10% {
    opacity: 1;
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }

}

.@{--css-prefix}-dropdown-menu {
  font-size: var(--dropdown-menu-title-font-size);
  color: var(--dropdown-menu-title-text-color);

  &__bar {
    height: var(--dropdown-menu-height);
    box-shadow: var(--dropdown-menu-box-shadow);
    line-height: var(--dropdown-menu-height);
    background: var(--dropdown-menu-background-color);
    .mixin-flex-space-between();
  }

  &__popup {
    position: relative;

    &-item {
      position: absolute;
      z-index: var(--dropdown-item-z-index);
      display: none;
      width: 100%;
      border-bottom-left-radius: var(--dropdown-item-border-radius);
      border-bottom-right-radius: var(--dropdown-item-border-radius);
      background-color: var(--dropdown-menu-background-color);
      transition: all .3s linear 0s;

      &__active {
        display: block;
        animation: showPopup .3s;
      }
    }
  }

  &__overlay {
    display: none;
    height: 100vh !important;
    overflow: hidden;
    opacity: 0;
    animation-duration: .2s;
    transition: all .3s linear 0s;
    .mixin-overlay(var(--dropdown-overlay-bg-color));

    &-active {
      z-index: var(--dropdown-overlay-z-index);
      display: block;
      opacity: 1;
    }
  }

  &-item {
    flex: 1;
    height: var(--dropdown-menu-height);
    line-height: var(--dropdown-menu-height);
    text-align: center;

    &__active {
      color: var(--color-primary);
    }

    &__title {
      height: 100%;
      .flex-center();

      &-text {
        padding: 10px;
      }
    }

    &__view {
      height: var(--dropdown-menu-height);
      padding: 0 20px;
      line-height: var(--dropdown-menu-height);

      &:last-child {
        border-bottom-left-radius: var(--dropdown-item-border-radius);
        border-bottom-right-radius: var(--dropdown-item-border-radius);
      }

      &__active {
        color: var(--color-primary);
        background-color: var(--dropdown-menu-active-background-color);
      }
    }
  }
}