@import 'xtend-library/src/core/drop/_drop.less';
@import 'xtend-library/src/core/list/list.less';
@import 'xtend-library/src/core/card/card.less';

/**
 * vars
 */

// space between button and drop

@drop-space: 6px;

/**
 * drop
 */

.drop {
  > .drop-inner {
    border-radius: 6px;
    > .drop-content {
      > .list, > .list-block {
        .padding(y, 1.3rem); // vertical space
      }
    }
    > .drop-design, > .drop-content {
      border-width: 1px;
      border-style: solid;
      border-color: transparent;
    }
  }
  // default options
  .drop-left();
  .drop-bottom();
  .drop-size-small();
}

// variant

.drop-default {
  > .drop-inner {
    .text-default();
    > .drop-design {
      border-color: @shade-100;
      background: @white;
      box-shadow: @shadow-light;
    }
  }
  > .drop-inner > .drop-content > .list-drop {
    .list-btns({ .btn-text() });
  }
}

.drop-primary {
  > .drop-inner {
    .text-inverse();
    > .drop-design {
      border-color: @accent-dark;
      background: @accent;
      box-shadow: @shadow-dark;
    }
  }
  > .drop-inner > .drop-content > .list-drop {
    .list-btns({ .btn-text() });
  }
}

// size

.drop-size-small {
  // list
  .list-drop {
    max-width: 25rem;
  }
  // card
  .card-drop {
    max-width: 35rem;
  }
}

.drop-size-medium {
  // list
  .list-drop {
    max-width: 35rem;
  }
  // card
  .card-drop {
    max-width: 45rem;
  }
}

.drop-size-large {
  // list
  .list-drop {
    max-width: 45rem;
  }
  // card
  .card-drop {
    max-width: 55rem;
  }
}

// content size

.drop.drop-small {
  // list
  .list-drop {
    .list-btns({
      .btn-small();
      .padding(x, 2rem);
    });
  }
  // card
  .card-drop {
    .card-small();
  }
}

.drop.drop-medium {
  // list
  .list-drop {
    .list-btns({
      .btn-medium();
      .padding(x, 2.5rem);
    });
  }
  // card
  .card-drop {
    .card-small();
    @media @min-sm {
      .card-medium();
    }
  }
}

.drop.drop-large {
  // list
  .list-drop {
    .list-btns({
      .btn-large();
      .padding(x, 3rem);
    });
  }
  // card
  .card-drop {
    .card-medium();
    @media @min-sm {
      .card-large();
    }
  }
}

// special

.drop-static {
  .list-drop, .card-drop {
    max-width: 100% !important;
  }
}

.drop-squared {
  > .drop-inner {
    border-radius: 0;
  }
}

.drop-noborder {
  > .drop-inner {
    > .drop-design, > .drop-content {
      border: 0;
    }
  }
}

.drop-nospace {
  padding: 0;
}

// special

.drop-disable {
  .drop-nospace();
  > .drop-inner {
    > .drop-content {
      // list
      > .list-drop {
        padding: 0;
        width: auto;
        max-width: none;
        align-items: initial;
        .list-btns({
          .btn-none-x();
        });
      }
      // card
      > .card-drop {
        .card-disable();
        width: auto;
        max-width: none;
      }
    }
  }
  // disable custom animation
  > .drop-inner {
    > .drop-content {
      opacity: 1 !important;
      .trans-anim-none() !important;
    }
  }
}

.drop-overflow-y {
  > .drop-inner > .drop-content {
    overflow-y: auto;
    max-height: 25rem;
    .overflow-style(@mode: inner);
  }
}

.drop-overflow-x {
  > .drop-inner > .drop-content {
    overflow-x: auto;
    max-width: 25rem;
    .overflow-style(@mode: inner);
  }
}

// animation

.drop {
  > .drop-inner {
    > .drop-design {
      opacity: 0;
    }
    > .drop-content {
      opacity: 0;
    }
  }
  &.in {
    animation-duration: @time-medium + @time-tiny; // needed for animation time and backdrop animation time, put max animation time
    > .drop-inner {
      > .drop-design {
        opacity: 1;
        transition: opacity @time-medium @ease-in;
      }
      > .drop-content {
        opacity: 1;
        transition: opacity @time-medium @ease-in @time-tiny;
      }
    }
    > .backdrop {
      .backdrop.in();
    }
  }
  &.out {
    animation-duration: @time-small + @time-tiny; // needed for animation time and backdrop animation time, put max animation time
    > .drop-inner {
      > .drop-design {
        opacity: 0;
        transition: opacity @time-small @ease-out @time-tiny;
      }
      > .drop-content {
        opacity: 0;
        transition: opacity @time-small @ease-out;
      }
    }
    > .backdrop {
      .backdrop.out();
    }
  }
}