$statuses_stage: "initial", "loading", "erroneous", "ready", "ongoing", "done";
$statuses_content: "empty", "nonempty";

miso-ask,
miso-hybrid-search,
miso-explore,
miso-search,
miso-recommendation {
  display: block;

  &, * {
    box-sizing: border-box;
  }
  &[visible-when],
  [visible-when] {
    display: none !important;
  }
  @each $status in $statuses_stage {
    &[status~="#{$status}"] {
      &[visible-when~="#{$status}"],
      [visible-when~="#{$status}"] {
        display: block !important;
      }
    }
  }
  @each $status in $statuses_content {
    &[status~="#{$status}"] {
      &[visible-when~="#{$status}"],
      [visible-when~="#{$status}"] {
        display: block !important;
      }
    }
  }
  @each $status_s in $statuses_stage {
    @each $status_c in $statuses_content {
      &[status~="#{$status_s}"][status~="#{$status_c}"] {
        &[visible-when~="#{$status_s}+#{$status_c}"],
        [visible-when~="#{$status_s}+#{$status_c}"] {
          display: block !important;
        }
      }
    }
  }
}

miso-hybrid-search {
  &[status~="unanswerable"] {
    &[visible-when~="!unanswerable"],
    [visible-when~="!unanswerable"] {
      display: none !important;
    }
  }
}

miso-ask-combo,
miso-hybrid-search-combo {
  display: block;
}

miso-query,
miso-answer {
  display: block;
}