#cloud_search_filters_sidebar {
  --sidebar--color--base--background: color-mix(in srgb, var(--color-body), var(--sidebar--color--base--text) 10%);
  --sidebar--color--highlight--background: var(--color-scheme-2-bg, var(--color-button-primary, #40af49));
  --sidebar--checkbox--base--color: var(--color-body);
  --sidebar--checkbox--checked--color: var(--sidebar--color--base--text);
  --sidebar--base--line-height: var(--type-base-line-height);
  --sidebar--filter-value--line-height: 1.2;
  --sidebar--base--letter-spacing: var(--type-base-spacing);
  --sidebar--base--font-family: var(--type-base-primary), var(--type-base-fallback);
  --sidebar--base--font-size: clamp(max(12px, calc(var(--type-base-size, 1rem) * 0.75)), 1.5vw, var(--type-base-size, 1rem));
  --sidebar--heading--font-size: clamp(1.125rem, 2.0vw, 1.5rem);
  --gutter: 1.125rem;
  --sidebar--checkbox--size: calc(var(--tag-active-icon-size, var(--sizebar--heading--font-size)) * 1.325);
  --sidebar--color--base--text: var(--color-text-body);
  --sidebar--color--highlight--text: var(--color-scheme-2-text, var(--color-button-primary-text, #fefefe));
  --sidebar--filter-value--spacing: max(0.325rem, 0.5em);

  margin: 0;
  background: var(--sidebar--color--base--background);
  color: var(--sidebar--color--base--text);

  .float-grid:has(&) {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
  }

  .float-grid:has(&) {
    flex-wrap: wrap;

    @media (min-width: 1024px) {
      flex-wrap: nowrap;
    }

    > .grid__item {
      @media (min-width: 1024px) {
        flex: 1;
        width: unset;
        max-width: unset;
      }

      &.medium-up--one-fifth {
        min-width: 10rem;

        @media (min-width: 768px) {
          flex: 0 0 100%;
        }
        @media (min-width: 1024px) {
          flex: 0 0 25%;
        }
        @media (min-width: 1280px) {
          flex: 0 0 22.5%;
        }
      }
    }
  }

  & > * {
    padding: 0 var(--gutter);
  }

  & .cloud-search-filter {
    display: flex;
    flex-direction: column;
    margin-block: 0;

    @media (min-width: 1024px) {
      margin-block-end: var(--gutter);
    }

    &:has(.cloud-search-filter__values) {
      margin-block-end: calc(var(--gutter) * 1.125);

      @media (min-width: 1024px) {
        margin-block-end: calc(var(--gutter) * 2);
      }
    }
  }

  & .cloud-search-filters-column {
    margin-block: 0;

    @media (min-width: 1024px) {
      margin-block-end: var(--gutter);
    }
  }

  &,
  & .cloud-search-filter-value {
    line-height: var(--sidebar--base--line-height);
    letter-spacing: var(--sidebar--base--letter-spacing);
    font-family: var(--sidebar--base--font-family), sans-serif;
    font-size: var(--sidebar--base--font-size);
  }

  & .cloud-search-filter__name,
  & .cloud-search-filters-sidebar__heading {
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    line-height: 1;
    text-transform: uppercase;
    font-family: var(--type-base-primary), sans-serif;
    font-size: var(--sidebar--heading--font-size, 1.5rem);
    font-weight: 700;
    cursor: pointer;
  }

  & .cloud-search-filters-sidebar__heading {
    margin-block-end: 5px;
    padding: var(--gutter);
    background: var(--sidebar--color--highlight--background);
    color: var(--sidebar--color--highlight--text);
    border-block-end: 0.325rem solid var(--sidebar--color--highlight--text);
  }

  & .cloud-search-filter__name {
    flex-direction: row-reverse;
    gap: 0.25rem;
    justify-content: space-between;
    margin-block-end: var(--gutter);
  }

  & .cloud-search-filter__values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar--filter-value--spacing);

    & > label {
      flex: 0 0 calc(25% - max(0.5rem, var(--sidebar--filter-value--spacing)));
      @media (min-width: 1024px) {
        flex: 0 0 100%;
      }
    }
  }

  & .cloud-search-filter-value {
    display: flex;
    gap: var(--sidebar--filter-value--spacing);
    align-items: center;
    justify-content: start;
    margin-block: var(--sidebar--filter-value--spacing);
    line-height: var(--sidebar--filter-value--line-height);
    font-size: 0;

    & > * {
      font-size: var(--sidebar--base--font-size);
    }
  }

  & .cloud-search-filter-value__count {
    margin: 0;

    @media (min-width: 1024px) {
      margin-inline-start: auto;
    }
  }

  & input {
    outline-color: var(--sidebar--color--highlight--background);
    border-radius: 0;
    background: var(--sidebar--checkbox--base--color);
  }

  & div:has(> input) {
    position: relative;
    & .cloud-search-text-field__clear {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  & .cloud-search-filter-value__checkbox {
    outline: 1px solid color-mix(in srgb, var(--sidebar--color--base--text) 50%, var(--sidebar--color--base--background));

    & input {
      display: flex;
      width: var(--sidebar--checkbox--size);
      min-width: var(--sidebar--checkbox--size);
      height: var(--sidebar--checkbox--size);
      min-height: var(--sidebar--checkbox--size);
      margin: 0;
      border: 0.325rem solid var(--sidebar--checkbox--base--color);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      &:checked {
        background: var(--sidebar--checkbox--checked--color);
      }
    }
  }

  & .cloud-search-text-field {
    box-sizing: border-box;
    display: flex;
    overflow: unset;
    align-items: end;
    align-self: center;
    padding: 0;
    outline-color: var(--sidebar--color--highlight--background);
    outline-offset: 0rem;

    border: 1px solid color-mix(in srgb, var(--sidebar--color--base--text) 50%, var(--sidebar--color--base--background)) !important;
    border-radius: 0;
    & .cloud-search-filter__values,
    & input {
      /* fixes odd border-clipping bug */
      margin-inline: 0;
    }

    &:focus-within {
      outline-offset: 0.125rem;
    }

    & input {
      padding: calc(var(--gutter) * 0.325) calc(var(--gutter) * 0.5);
      border: none;
    }
  }

  & .cloud-search-num-field__currency,
  & .cloud-search-price-field__currency {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    margin: 0;
    padding-inline: calc(var(--gutter) * 0.25);
    line-height: 1;

    & + input {
      padding-inline-start: calc(var(--gutter) * 0.25);
    }
  }

  & .cloud-search-filter {
    z-index: 999;
  }
}