.statistiques-collections {
  .statistiques-collections__toolbar {
    @apply hidden lg:block;

    .tablist {
      @apply gap-7;
    }
  }

  .amount-container {
    @apply border border-primary h-24 lg:h-40 w-full relative flex items-center justify-start gap-12 bg-carhop-green-50;

    .percentage-label {
      @apply !mb-0 text-xl font-semibold;
    }
  }

  .amount-container,
  .amount-container-all {
    min-height: 10rem;
    @media (max-width: 768px) {
      min-height: unset;
    }
  }

  .amount-container-all {
    @apply bg-primary text-white p-8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p {
      @apply text-white !mb-0;
    }
    p.total-documents-count {
      @apply text-4xl fjalla uppercase pb-2;
      font-weight: 200 !important ;
    }
  }

  .percentage-bar {
    @apply bg-primary text-white flex items-center justify-center h-full;
    width: 0;
    transition: width 1.3s ease-in-out;
  }

  &__stats-items {
    @apply flex flex-col gap-8 pt-8;

    .heading {
      @apply flex items-center justify-between gap-2 pb-2;
    }

    li {
      list-style: none !important;
    }
  }

  &__stat-item {
    .total-documents-count {
      @apply !mb-0;
    }
    &[data-active='false'] {
      display: block;
      @screen lg {
        display: none;
      }
    }
    &[data-active='true'] {
      display: block;
    }

    .stat-item-description {
      @apply pt-8;
    }
  }
  .statistiques-collections__bg {
    @apply w-screen px-8;
    margin: 0 calc(50% - 50vw) !important;

    img {
      @apply max-w-screen-xl mx-auto w-full;
    }
  }
  &:has(li#tabpanel-0[data-active='true']) {
    .statistiques-collections__bg {
      @apply lg:hidden;
    }
  }

  .collection-cover-pictures-container {
    @apply pt-12 pb-32 mb-12 hidden md:block;
  }

  .collection-cover-pictures {
    @apply max-w-screen-xl mx-auto relative;
    .pictures {
      @apply grid grid-cols-3 2xl:gap-20 xl:gap-12 lg:gap-12 gap-8 items-center px-6;
    }
    img {
      @apply p-4 border border-primary h-auto bg-white;
    }
    img:nth-child(n + 1) {
      @apply -rotate-6;
    }
    img:nth-child(n + 2) {
      @apply rotate-3;
    }
    :nth-child(n + 3) {
      @apply -rotate-2;
    }

    .decorative-square-right,
    .decorative-square-left {
      @apply absolute block top-0 border border-primary  h-full;

      &:after {
        @apply w-16 h-16 bg-primary absolute content-[''] block z-50;

        background-size: 60% 60%;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    .decorative-square-left {
      @apply left-0;
      transform: translateY(70%) translateX(-20px) rotate(2deg);
      height: 80%;
      width: 40%;
      &:after {
        @apply bottom-0 right-12 translate-y-1/2;
        background-image: url('../resources/img/icons/carhop-outils.svg');
      }
    }
    .decorative-square-right {
      @apply right-0;
      width: 40%;
      height: 90%;
      transform: translateY(40%) translateX(20px) rotate(-10deg);

      &:after {
        @apply right-0 top-1/2 translate-x-1/2 p-4;
        background-image: url('../resources/img/icons/carhop-reportage.svg');
      }
    }
  }
}