@use "../globals/" as *;
@use "../util/" as *;

.drop-down {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 80%;
   height: auto;
   max-height: max-content;
   width: 80%;
   opacity: 0;
   display: flex;
   flex-direction: column;
   z-index: $dropdown-zindex;
   list-style: none;
   background-color: #fff;
   box-shadow: $base-box-shadow;
   border-radius: $border-radius-lg;
   transition: all 0.3s ease-in-out;
}

.drop-down.fade-in {
   animation: fade-in 0.3s ease-in-out forwards;
}

.drop-down.fade-out {
   animation: fade-out 0.3s ease-in-out forwards;
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fade-out {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}


@include breakpoint(sm) {
  .drop-down {
    position: absolute;
    top: auto;
    left: 0;
    margin-top: 1rem;
    min-width: 100%;
    width: 100%;
    transform: none;
    border-radius: $border-radius-lg;
  }
}

.backdrop {
   z-index: $backdrop-zindex;
   position: fixed;
   display: block;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.5);
   transition: all 0.3s ease-in-out;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: $font-size-sm;
  color: var(--text-core-lc);
  white-space: nowrap;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1.5rem;
  clear: both;
  color: inherit;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--text-core-hc);
  text-decoration: none;
  background-color: var(--bg-core-primary-light);
}

.dropdown-item:active,
.dropdown-item.active {
  color: var(--text-core-hc);
  text-decoration: none;
  background-color: var(--bg-core-primary);
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--bg-core-primary-light);
}
