/* "Legacy Style" Filters and Sort  */

/* Trigger wrapper. Contains <buttons> to open/close filter menu. */
.legacy-filter__triggers {
  margin-bottom: 0.5em;
  width: 100%;
  overflow-x: scroll;
  overflow-x: auto;
  display: flex;
  padding-bottom: 0.2em;
}
@media (min-width: 700px) {
  .legacy-filter__triggers {
  }
}

/* <button> to open individual filter menu. also used for sort menu.*/
.legacy-filter__trigger {
  height: 2em;
  font-size: 1em;
  margin: 0 0.5em 0 0;
  background: none;
  border: 2px solid var(--uphe-light-gray);
  padding: 0.2em 2em 0.2em 1em;
  text-align: left;
  cursor: pointer;
  position: relative;
  margin-bottom: 0.5em;
  flex-shrink: 0;
  color: var(--uphe-dark-gray);
}

/* selected(open) state of <button> trigger */
.legacy-filter__trigger.selected {
  /* background: var(--uphe-light-gray); */
  /* color: var(--uphe-blue-dark); */
}

/* Caret › at the end of trigger */
.legacy-filter__trigger .icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0.4em;
  right: 0.6em;
  opacity: 0.8;
  transition: transform var(--hover-transition-duration);
}
/* Selected state of the caret. Pointing upward */
.legacy-filter__trigger.selected .icon {
  transform: rotate(180deg);
}

/* Filter dropdown wrapper. All filter menu is wrapped by this.*/
.legacy-filter__selection {
  background: var(--uphe-light-gray);
  color: var(--uphe-blue-dark);
  margin-top: -1.3em;
  margin-bottom: 1em;
}

/* Filter item group by category */
.legacy-filter__selection > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  padding: 3em 1em 1em 1em;
  gap: 1em;
  position: relative;
}
/* For the space of "Select All" button, padding arrangement is changed. */
@media (min-width: 700px) {
  .legacy-filter__selection > span {
    padding: 1em 1em 1em 6em;
  }
}

/* Sort menu overwrite for the category */
.legacy-filter__selection > span.select-sort {
  padding: 1rem 0;
  justify-content: center;
}
/* On desktop, Left align works better? TBD*/
@media (min-width: 700px) {
  .legacy-filter__selection > span.select-sort {
    padding: 1rem;
    justify-content: left;
  }
}

/* "Select All" text button. No functionality built in, but expecting to work as the same way as current site. */
.legacy-filter__all {
  position: absolute;
  top: 1.5em;
  left: 1em;
  border: none;
  color: var(--uphe-blue-dark);
  background: none;
  font-size: 0.7em;
  height: var(--checkmark-size);
  cursor: pointer;
  padding: 0;
}
/* "Select All" relocation for desktop */
@media (min-width: 700px) {
  .legacy-filter__all {
    left: 1em;
    border: none;
    color: var(--uphe-blue-dark);
    background: none;
    font-size: 0.7em;
    height: var(--checkmark-size);
    cursor: pointer;
  }
}

/* Individual filter item wrapper. Overwriting sort-filter.css for legacy layout.
<label.ui__cb____item>
  ::before - checkbox border-only.
  <input> - functional part of the checkbox. invisible but receives mouse focus
  <span.ui__cb__checkmark> - check mark container. dark blue box that fills the checkbox.
    ::after - checkmark ✓ built with border. 
  <span.ui__cb__label> - Text portion of the checkbox
*/
.legacy-filter .filter__item {
  flex: 0 0 min(46%, 13.5em);
  font-size: 0.75em;
  --cb-size: 1.4em;
  --cb-primary-color: var(--uphe-dark-gray);
  --cb-secondary-color: #fff;
}

/* Sort dropdown */
.legacy-filter .filter__select {
  background: #fff;
  color: var(--uphe-blue-dark);
  border: 2px solid var(--uphe-light-gray);
  margin-left: 0;
  padding: 0.2em;
}

/* Sort option wrapper */

/* Sort option in pill buttons */
.btn-sort-option {
  padding: 0.6em 0.3em;
  font-size: 0.9em;
  border-color: transparent;
  width: min(40%, 9em);
  color: var(--uphe-dark-gray);
}

/* Sort option button's hover state */
.btn-sort-option:hover {
  opacity: 0.8;
}

/* Current/selected sort button. */
.btn-sort-option.selected {
  background: var(--uphe-blue-dark);
  color: #fff;
  pointer-events: none;
}