.filters-toolbar {
  @apply py-8;
  li {
    @apply h-auto;
  }
  hr {
    @apply border-neutral-300 my-6;
  }

  &__posts-results-indications {
    @apply flex flex-wrap justify-between items-center pb-4;
  }
  &__posts-results-amount {
    @apply pb-4;
    .results-filter-name {
      @apply font-bold;
    }
    .results-amount {
      @apply font-semibold;
    }
    &.filter-disable {
      .results-filter-name,
      .results-for {
        @apply hidden sr-only;
      }
    }
  }
  &__accessibility-action-buttons {
    @apply flex flex-wrap gap-x-6 justify-start;
    button {
      @apply underline;
    }
  }
  &__action-button {
    @apply bg-white shadowed py-4 px-4 rounded-xl 
    font-bold 
    flex 
    justify-center
    items-center
    gap-3
    w-fit;
    outline-offset: 0 !important;
    transition: transform 0.2s ease-in-out;
    &:hover {
      transform: scale(1.02) translateY(-2px);
    }
    .icon {
      @apply h-6 w-6 object-contain object-right;
    }
    .name {
      @apply block;
    }
  }
  &__action-button--load-all {
    @apply underline;
  }
  &__action-button--active {
    @apply text-secondary underline underline-offset-4;
    outline: transparent;
  }

  /* FILTERS */
  &__filters-container {
    @apply flex flex-col lg:flex-row gap-4;
  }
  .news-type-filters-wrapper,
  .publication-type-filters-wrapper {
    @apply flex
    flex-row
    justify-start
    md:justify-center
    lg:justify-start
    flex-wrap
    container
    w-fit
    gap-x-4 gap-y-3 p-0;
  }

  .action-thematiques-filters-wrapper {
    @apply h-20  border-b border-neutral-300;
  }
  &__action-thematiques-filters {
    @apply absolute pb-0 border-b border-neutral-400 bg-white border  w-fit rounded-xl !z-10;
    /* THEMATIQUES FILTERS  */
    .filter-by-thematiques-submenu-toggle {
      @apply font-bold p-4 rounded-xl flex items-center gap-12;
      box-sizing: border-box;
      outline-offset: 0;
      outline-radius: 10px;

      &:after {
        @apply inline-block top-0 right-0 bottom-0 w-3 h-3;
        content: '';
        filter: invert(17%) sepia(69%) saturate(4735%) hue-rotate(351deg) brightness(94%)
          contrast(94%);
        background-image: url('../resources/img/graphic-assets/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translateY(1px);
        transition: transform 0.2s ease-in-out;
      }
      &[active] {
        &:after {
          transform: translateY(2px) rotate(180deg);
        }
      }
    }

    .action-thematiques-filters-list {
      @apply w-full flex-col items-start gap-0 pb-4 mt-4;
      /* @apply bg-red-500 absolute bottom-0 left-0 translate-y-full w-full; */
    }
    li {
      @apply flex gap-2 items-center justify-start w-full px-4 py-1;
    }
    li:hover {
      @apply bg-neutral-100 rounded-md;
    }
  }

  &__active-filters-viewer {
    @apply mt-2 flex flex-wrap gap-6 items-center;
    .active-filters-button-container {
      @apply flex gap-4 flex-wrap;
      button {
        @apply bg-neutral-100 px-4 py-3 rounded-xl font-bold h-fit;
      }
    }
    .filters-toolbar__action-button--reset-filter {
      @apply !py-2;
    }

    .filters-toolbar__action-button--active-filter-remover {
      @apply flex items-center gap-3;
      &:after {
        @apply inline-block w-5 h-5;
        content: '';
        background-image: url('../resources/img/graphic-assets/cross-in-cirle-thick.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }
  }

  &:not([thematique-filter-active]) {
    .filters-toolbar__active-filters-viewer {
      @apply hidden;
    }
  }
}
