@use 'responsive';

.dropdown-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  &-enter-active,
  &-leave-active {
    transition: all 150ms ease;
  }
}

.dropdown_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  z-index: 10;
}

.dropdown_wrapper {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5em);

  background-color: var(--clr-bg3);
  box-shadow: 0 0 5px 1px var(--clr-primary);

  width: 100%;
  max-width: 550px;

  max-height: 750px;
  overflow: auto;

  padding: 1em;
  z-index: 100;
}

@include responsive.smallScreen {
  .dropdown_wrapper {
    font-size: 1.1em;
    max-width: 100%;
  }
}