/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/* =============================================
=            Facet button                      =
============================================= */
@layer sdc {
  .block-facet--button {
    --button-facet-background: var(--color-white);
    --button-facet-color: var(--color-black-soft);
    position: relative;
    overflow-x: auto;
    max-width: calc(100vw - var(--scrollbar-width));
    margin: 0 -1.25rem;
    padding: 2rem 0;
    background-color: hsl(0, 0%, 20%, 0.04);
    scrollbar-color: var(--color-black-light) hsl(0, 0%, 88%);
    scrollbar-width: thin;
  }
  .block-facet--button::-webkit-scrollbar {
    width: 0.375rem;
    height: 0.25rem;
  }
  .block-facet--button::-webkit-scrollbar-track {
    background-color: hsl(0, 0%, 88%);
  }
  .block-facet--button::-webkit-scrollbar-thumb {
    border-radius: 1.25rem;
    background-color: var(--color-black-light);
  }
  .block-facet--button ul:not(.contextual-links) {
    display: flex;
    margin: 0 1.25rem;
    list-style: none;
    gap: 1rem;
  }
  @media (min-width: 75em) {
    .block-facet--button ul:not(.contextual-links) {
      margin: 0;
      gap: 1.5rem;
    }
  }
  .block-facet--button .facet-item {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 0.625rem;
    box-shadow: 0 0 2px rgb(0, 0, 0, 0.25);
  }
  .block-facet--button .facet-item input {
    display: none;
  }
  .block-facet--button .facet-item__value {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: right;
  }
  .block-facet--button .facet-item label {
    display: grid;
    grid-template-areas: "left right";
    grid-template-columns: 1rem auto;
    align-items: center;
    width: max-content;
    height: 100%;
    padding: 0.8125rem 1.25rem;
    column-gap: 0.625rem;
    transition:
      color 0.2s ease-out,
      background-color 0.2s ease-out;
    color: var(--button-facet-color);
    background-color: var(--button-facet-background);
  }
  .block-facet--button .facet-item label:before {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    display: inline-block;
    grid-area: left;
    width: 1rem;
    height: 1rem;
    content: "";
    border: 1px solid var(--color-grey-3);
    background-color: var(--color-white);
  }
  .block-facet--button .facet-item label svg {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: left;
    width: 100%;
    color: var(--color-action);
  }
  .block-facet--button .facet-item label:hover {
    cursor: pointer;
  }
  .block-facet--button .facet-item label.is-active,
  .block-facet--button .facet-item label:hover {
    --button-facet-color: var(--color-white);
    --button-facet-background: var(--color-action);
  }
  @media (min-width: 75em) {
    .block-facet--button .facet-item label {
      width: 100%;
      padding: 1.25rem;
    }
  }
  .block-facet--button .facet-item input.facets-checkbox:checked + label {
    --button-facet-color: var(--color-white);
    --button-facet-background: var(--color-action);
  }
  @media (min-width: 75em) {
    .block-facet--button .facet-item {
      width: calc(20% - 1.2rem);
    }
    .block-facet--button {
      overflow: unset;
      width: 100%;
      margin: 0;
      background-color: initial;
    }
  }
}