/**
 * drop
 */

.drop-container {
  position: relative;
}

.drop {
  z-index: inherit;
  &.in {
    z-index: @index-drop;
  }
  &.out {
    z-index: @index-drop - 1;
  }
}

.drop {
  .toggle-block();
  position: absolute;
  animation-duration: inherit; // needed for animation time and backdrop animation time, put max animation time
  > .drop-inner {
    position: relative;
    z-index: @index-backdrop + 1;
    > .drop-design {
      .design-setup();
      border-radius: inherit;
    }
    > .drop-design, > .drop-content {
      border-radius: inherit;
    }
  }
}

// special

.drop-container-static {
  position: static;
  > .drop {
    .drop-static();
  }
}

.drop-static {
  width: 100%;
  > .drop-inner {
    width: 100%;
  }
  // @FIX no horizontal drop position
  left: 0 !important;
  right: 0 !important;
}

.drop-container-disable {
  .xt-disable();
  position: initial;
  > a, > button {
    display: none;
  }
  > .drop {
    .drop-disable();
  }
}

.drop-disable {
  display: inline-block;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  > .drop-inner {
    z-index: initial;
    > .drop-design {
      display: none;
    }
  }
}

// before + after

.drop-before() {
  padding: @drop-space;
  left: auto;
  right: 100%;
}

.drop.drop-before {
  .drop-before() !important;
}

.drop-after() {
  padding: @drop-space;
  left: 100%;
  right: auto;
}

.drop.drop-after {
  .drop-after() !important;
}

// left + right

.drop-left() {
  padding: @drop-space 0;
  left: 0;
  right: auto;
}

.drop.drop-left {
  .drop-left() !important;
}

.drop-right() {
  padding: @drop-space 0;
  left: auto;
  right: 0;
}

.drop.drop-right {
  .drop-right() !important;
}

// bottom + top

.drop-bottom() {
  padding: @drop-space 0;
  top: 100%;
  bottom: auto;
}

.drop.drop-bottom {
  .drop-bottom() !important;
}

.drop-top() {
  padding: @drop-space 0;
  top: auto;
  bottom: 100%;
}

.drop.drop-top {
  .drop-top() !important;
}

// center

.drop-center() {
  &:before {
    display: none;
    content: 'xt-drop-center';
  }
}

.drop.drop-center {
  .drop-center() !important;
}

// middle

.drop-middle() {
  padding-top: 0;
  padding-bottom: 0;
  &:after {
    display: none;
    content: 'xt-drop-middle';
  }
}

.drop.drop-middle {
  .drop-middle() !important;
}

// contain

.drop-contain-bottom() {
  .drop-middle();
  top: auto;
  bottom: 0;
}

.drop.drop-contain-bottom {
  .drop-contain-bottom() !important;
}

.drop-contain-top() {
  .drop-middle();
  top: 0;
  bottom: auto;
}

.drop.drop-contain-top {
  .drop-contain-top() !important;
}