MARL-Mastodon-Archive-Reader-Lite/css/_filters.scss

.toots-filters {
  height: 100dvh;
  max-height: 100dvh;
  padding: 1rem 1rem 2em;
  background-color: var(--bg4);
  overflow-y: auto;
  container-type: inline-size;
  user-select: none;

  h2 {
    margin: 0 0 2rem;
  }
}

.toots-filters-reset {
  margin-top: 1rem;
  text-align: right;

  .reset:not(:disabled) {
    box-shadow: 0 0 0 0.25rem var(--accent);
  }
}

.toots-filters-group {
  margin: 0 0 1rem;
}
.toots-filters-group-title {
  margin: 0 0 0.5rem;
}

.toots-filters-group:has(.text) {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0.35rem;
  .toots-filter {
    grid-column: span 2;
    &.text {
      display: grid;
      grid-template-columns: subgrid;
    }
  }
  @container (width < 260px) {
    display: block;
    .toots-filter.text label {
      margin: 0.5rem 0 0.25rem;
    }
  }
}

.toots-filter {
  margin-bottom: 2px;

  label {
    display: block;
    padding: 0.2rem 0.3rem;
    border-radius: 0.2rem;
  }

  &.sep-above {
    margin-top: 1rem;
  }
  label {
    font-size: 0.85em;
  }

  &.text {
    input {
      display: block;
      width: 100%;
    }
  }
  &.checkbox {
    label {
      position: relative;
      padding-left: 1.7rem;
      background: transparent url("../svg/dark/checkbox-unchecked.svg")
        no-repeat 2px 2px / auto 18.4px scroll;

      &:has(input:checked) {
        background-image: url("../svg/dark/checkbox-checked.svg");
      }
    }
    input {
      position: absolute;
      left: 1px;
      top: 1px;
      z-index: 1;
      opacity: 0;
    }
  }

  &:hover label,
  &:focus-visible label,
  &:focus-within label {
    background-color: rgba(255, 255, 255, 0.35);
  }

  &.active label {
    color: var(--fg-inv0);
    opacity: 1;
    background-color: var(--accent);
    @media (forced-colors: active) {
      outline: 1px solid Highlight;
    }
  }
}