Metiers_du_patrimoine_theme/resources/css/pages/repertoire-metiers.css

.artisans-posts {
  @apply md:flex gap-4 pt-8;

  &__grid {
    @apply flex flex-col lg:grid grid-cols-1 lg:grid-cols-2 gap-6  w-full h-fit;

    .no-results {
      @apply col-span-2  text-center pt-4;

      &__cover {
        @apply w-40 mx-auto;
      }
      h3 {
        @apply text-patrimoine-sante-securite mt-8;
      }
      p {
        @apply text-neutral-900 tracking-wide;
      }
    }
  }
  .card-artisans {
    /* @apply h-fit; */
  }
}
/* .sidebar-container {
  @apply pb-12;
} */
.metier-patrimoine-searchbar {
  @apply w-80 lg:w-80 shrink-0 h-fit  sticky top-0;
  .posts-results-count {
    @apply shrink-0;
  }
  &__results-indications {
    @apply flex gap-1 items-center flex-wrap;
    .results-count {
      @apply font-bold;
    }
    .posts-results-count {
      @apply !my-0;
    }
    .active-research-indicator {
      @apply !flex items-center gap-x-1 gap-y-0 !my-0 relative;

      &[is-active='true'] {
        @apply block;
      }
      &[is-active='false'] {
        @apply !hidden;
      }

      /* max-width: -webkit-calc(100% - 40px);
      max-width: 90%; */
      @apply w-fit;
      max-width: calc(100% - 40px);

      button {
        @apply flex items-center;
        @apply border-2 border-solid border-neutral-800 rounded-full px-3 py-2 my-0;
        .current-queried-word {
          max-width: 200px;
          @apply font-bold text-sm;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: fit-content;
        }
        &:after {
          @apply block w-5 h-5 ml-2 shrink-0;
          max-width: 100%;
          content: '';
          background-image: url('../resources/img/graphic-assets/cross-in-cirle-thick.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
      }
    }
  }

  h4 {
    @apply my-0;
  }
  .checkbox-choice {
    @apply pl-0 pt-1;
    @apply flex flex-wrap;
    transition: all 0.3s ease;
    &__subtaxonomy-list {
      @apply pl-4 my-1 w-full hidden;
    }

    &:has(> input[type='checkbox']:checked) {
      .checkbox-choice__subtaxonomy-list {
        @apply block;
      }
    }

    &.checkbox-choice-parent {
      @apply px-2 rounded-2xl;
    }
    &.checkbox-choice-parent:has(.child-checkbox:checked) {
      transition: all 0.3s ease;
      @apply bg-patrimoine-sante-securite-light pt-3;
      .checkbox-choice__subtaxonomy-list {
        @apply block;
      }
    }

    li {
      @apply flex w-auto flex-shrink;
    }
    &:before {
      content: none;
      /* box-shadow: inset 1em 1em #8B2FF7; */
    }
    label,
    input {
      /* @apply inline; */
    }
    label {
      @apply -translate-y-1 ml-2 flex;
    }
    > label {
      max-width: 80%;
    }
    input[type='checkbox'] {
      @apply shrink-0;
    }
    input[type='checkbox']:before {
      box-shadow: inset 1em 1em #8b2ff7;
    }
  }
  .fieldset-titling {
    @apply flex items-center gap-4;
  }
  .fieldset-icon {
    @apply w-10 h-10 p-2 bg-white rounded-lg shadowed;
    object-fit: contain;
  }
  &__search-by {
    @apply flex flex-col gap-4 mt-4;
    legend {
      @apply block text-neutral-400 uppercase !text-base tracking-wider mb-4;
    }
    .search-radio-card {
      @apply bg-white  rounded-lg p-4  shadowed flex justify-between cursor-pointer;
      label {
        @apply font-bold;
      }

      label:before {
        @apply mr-2 translate-y-2 bg-no-repeat;
        background-position: center;
        background-size: contain;

        content: '';
        display: inline-block;
        height: 30px;
        width: 36px;
      }
      label[for='building_elements']:before {
        background-image: url('../resources/img/pictogrammes/Homegrade_repertoire-elements.svg');
      }
      label[for='job_types']:before {
        background-image: url('../resources/img/pictogrammes/Homegrade_repertoire-metiers.svg');
      }
    }
  }

  &__geographic-filters,
  &__elements-batiments-filters,
  &__metiers-filters {
    @apply border border-neutral-300 p-4 rounded-3xl my-4 w-full;
  }
  &__geographic-filters {
    @apply hidden;
  }
  &:has(
      #elements_batiments_checkbox:checked,
      #metiers_checkbox:checked
    ) {
    .metier-patrimoine-searchbar__geographic-filters {
      @apply block;
    }
  }

  &__elements-batiments-filters,
  &__metiers-filters {
    @apply hidden;
  }
  /* HIDE METIERS FILTERS WHEN SEARCH IS ON ELEMENTS BATIMENTS */
  &:has(
      .metier-patrimoine-searchbar__search-by
        #elements_batiments_checkbox:checked
    ) {
    .metier-patrimoine-searchbar__elements-batiments-filters {
      @apply block;
      /* @apply opacity-40; */
    }

    .search-radio-card--metiers {
      @apply opacity-60;
    }
  }

  /* HIDE ELEMENTS BATIMENTS FILTERS WHEN SEARCH IS ON METIERS */

  &:has(
      .metier-patrimoine-searchbar__search-by
        #metiers_checkbox:checked
    ) {
    .metier-patrimoine-searchbar__metiers-filters {
      @apply block;
      /* @apply opacity-40; */
    }
    .search-radio-card--building-elements {
      @apply opacity-60;
    }
  }

  .card-suggest-artisan {
    @apply p-3 w-fit gap-3 bg-white shadowed 
	font-bold rounded-2xl flex items-center justify-center my-5;
    transition: transform 0.3s;

    &:after {
      @apply content-[''] w-3 h-3 block bg-no-repeat bg-center bg-contain mt-1 mr-3;
      background-image: url('../resources/img/pictogrammes/Homegrade_back_icon.svg');
      rotate: 180deg;
    }

    &:hover {
      @apply translate-x-2;
    }
  }
}