@import '../../common/sass/variables';

.dropDownAnimation {
  position: fixed;
  z-index: $zIndex-drop-down;
  opacity: 0;
  transform: scale(0, 0);

  &.open {
    opacity: 1;
    transform: scale(1, 1);
  }
  transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  max-height: 100%;

  .horizontal {
    max-height: 100%;
    overflow-y: auto;
    transform: scaleX(0);
    opacity: 0;
    transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    &.open {
      opacity: 1;
      transform: scaleX(1);
    }

  }
  .vertical {
    transform: scaleY(0);
    opacity: 0;
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

    &.open {
      opacity: 1;
      transform: scaleY(1);
    }
  }

}