/*
 * Stylesheet: List with Filters
 * Applies to editor and front end
 */

/***********************************************
 *
 * Shared styles
 *
 ***********************************************/

:root {
  --primary-color: #121212;
}

.block__list-with-filters {
  clear: both;
}

.block__list-with-filters .block__list .list--inner {
  display: flex;
  width: 100%;
  justify-content: center;
}

.block__list-with-filters .block__list .inner-blocks-wrapper {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

@media (min-width: 320px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 320px;
  }
}

@media (min-width: 375px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 375px;
  }
}

@media (min-width: 480px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 480px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (min-width: 768px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 1024px;
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

@media (min-width: 1366px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 1366px;
    padding-right: 5rem;
    padding-left: 5rem;
  }
}

@media (min-width: 1466px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 1466px;
  }
}

@media (min-width: 1536px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 1536px;
    padding-right: 6rem;
    padding-left: 6rem;
  }
}

@media (min-width: 1920px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 1920px;
  }
}

.block__list-with-filters .block__list .inner-blocks-wrapper {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 1024px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1366px) {

  .block__list-with-filters .block__list .inner-blocks-wrapper {
    max-width: 1024px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

.block__list-with-filters .breadcrumbs__list {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {

  .block__list-with-filters .breadcrumbs__list {
    grid-column-start: 1;
    grid-column-end: 4;
  }
}

.block__list-with-filters .list-wrapper {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {

  .block__list-with-filters .list-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .block__list-with-filters .list-wrapper {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
  }
}

/* Series and Collection post variant */

@media (min-width: 768px) {

  .single-collection .block__list-with-filters .list-wrapper,
.single-series .block__list-with-filters .list-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .single-collection .block__list-with-filters .list-wrapper,
.single-series .block__list-with-filters .list-wrapper {
    grid-column-start: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Block Button - Load more button */

.block__list-with-filters .block__button {
  grid-column: 1 / -1;
}

/* Element states and/or elements that can't be reached in template files */

.is-mobile.list-with-filters__filters {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  padding-left: 0px;
  opacity: 1;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.is-mobile.is-open.list-with-filters__filters {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.is-active .filters__submenu {
  display: flex;
  opacity: 1;
}

.is-active .filters__btn--reset {
  display: flex;
}

.is-inactive .filters__submenu,
.is-inactive .filters__btn--reset {
  display: none;
  opacity: 0;
}

.is-active .filters__arrow {
  rotate: 180deg;
}

.filters__btn-close svg {
  pointer-events: none;
}

.filters__list {
  padding: 0px;
}

.filters__list-item {
  position: relative;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(112 112 112 / var(--tw-border-opacity));
}

.filters__list-item svg.arrow-right {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.filters__btn--filter-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Custom label inputs */

.filters__submenu .submenu__input-label::before {
  position: absolute;
  left: 0px;
  height: 18px;
  width: 18px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(18 18 18 / var(--tw-border-opacity));

  content: "";
}

.filters__submenu .submenu__input-label::after {
  position: absolute;
  left: 3px;
}

/* Radio */

.filters__submenu input[type="radio"] + .submenu__input-label::before,
.filters__submenu input[type="radio"] + .submenu__input-label::after {
  border-radius: 9999px;
}

.filters__submenu input[type="radio"]:checked + .submenu__input-label::after {
  left: 4px;
  height: 10px;
  width: 10px;
  --tw-border-opacity: 1;
  border-color: rgb(18 18 18 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity));

  content: "";
}

/* Checkbox */

.filters__submenu input[type="checkbox"] + .submenu__input-label::before {
  border-radius: 0.125rem;
}

.filters__submenu
input[type="checkbox"]:checked + .submenu__input-label::before {
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity));
}

.filters__submenu
input[type="checkbox"]:checked + .submenu__input-label::after {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));

  content: "\2713";
}