/* Parent */
.bs-dropdown-parent {
  display: inline-block;
  position: relative;
}

/* Content */
.bs-dropdown {
  --dropdown-bottom: 0;
  --dropdown-left: 0;
  --dropdown-top: auto;
  --dropdown-width: 100%;
  background-color: var(--bs-bg-base-elevated);
  border-radius: 4px;
  bottom: var(--dropdown-bottom);
  box-shadow: var(--bs-shadow-contentMedium);
  left: var(--dropdown-left);
  line-height: 1.5rem;
  margin: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  top: var(--dropdown-top);
  transform: translateY(100%);
  transform-origin: center bottom;
  transition-duration: 75ms;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  width: var(--dropdown-width);
  z-index: -1;
}

/* mobile header */
/* TODO: h3 may not be the right tag to use here... label, possibly? */
.bs-dropdown > :where(header) {
  border-bottom: 1px solid var(--bs-border-base);
  padding: 1.5rem;
}

.bs-dropdown > :where(header) :where(h3) {
  font-size: 1.25rem;
}

.bs-dropdown > :where(header) :where(p) {
  font-size: 1rem;
}

/* mobile search input */
.bs-dropdown :where(.bs-dropdown-search) {
  padding: 1.5rem 1.5rem 0 1.5rem;
}

.bs-dropdown :where(.bs-dropdown-search bs-input-search) {
  margin-bottom: 1rem;
  margin-left: -0.75rem;
  width: calc(100% + 1.5rem);
}

.bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
  --options-height-max: 11.5rem;
}

/* data-shown */
.bs-dropdown:where([data-shown]) {
  opacity: 1;
  transform: translateY(0);
  z-index: 999;
}

@media (min-width: 752px) {
  .bs-dropdown {
    --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
    --dropdown-left: var(--dropdown-wscreen-left, initial);
    --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
    --dropdown-width: var(--dropdown-wscreen-width, initial);
    position: absolute;
    transform: initial;
  }

  /* Hide the header */
  .bs-dropdown > :where(header) {
    display: none;
  }

  /* Sizing */
  .bs-dropdown:where([data-width="sm"]) {
    --dropdown-wscreen-width: 10rem;
  }

  .bs-dropdown:where([data-width="md"]),
.bs-dropdown:where(:not([data-width])) {
    --dropdown-wscreen-width: 20rem;
  }

  .bs-dropdown:where([data-width="lg"]) {
    --dropdown-wscreen-width: 40rem;
  }

  .bs-dropdown:where([data-width="content"]) {
    --dropdown-wscreen-width: auto;
  }

  .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
    --dropdown-wscreen-width: 100%;
  }

  /* data-shown */
  .bs-dropdown:where([data-shown]) {
    opacity: 1;
  }

  /* data-top */
  .bs-dropdown:where([data-top]) {
    --dropdown-wscreen-bottom: calc(100% + 0.5rem);
    --dropdown-wscreen-top: auto;
  }

  /* data-justify="center" */
  .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
    --dropdown-wscreen-left: 50%;
    transform: translateX(-50%);
  }

  .bs-dropdown :where(.bs-dropdown-options) {
    --options-height-max: 20rem;
  }

  .bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
    --options-height-max: 17.25rem;
  }
}
bs-dropdown {
  display: block;
}