carhop__dynamiques-theme__PROD-DEV/resources/css/components/article-revues-toolbar.css

#revue-toolbar,
#article-toolbar {
  @apply col-span-2 container mx-auto mb-2 lg:mb-0;

  .tablist {
    @apply flex items-center overflow-y-visible gap-8 lg:gap-3 xl:gap-12 border-b border-primary;
    position: relative;

    span {
      @apply sr-only lg:not-sr-only;
    }
    /* @media screen and (max-width: 1024px) {
    } */
    /* @media screen and (max-width: 1024px) {
      border-bottom: none;
      padding-bottom: 1em;
    
      background: linear-gradient(
          to right,
          var(--wp--preset--color--primary, #136f63),
          var(--wp--preset--color--primary, #136f63)
        )
        bottom 2em center / 100% 1px no-repeat;

      &::-webkit-scrollbar {
        width: 2em;
        height: 1em;
      }

      &::-webkit-scrollbar-track {
        background: #cef9ee;
        border-radius: 100vw;
        margin-block: 0.5em;
      }

      &::-webkit-scrollbar-thumb {
        @apply bg-primary;
        border-radius: 100vw;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: hsl(120 100% 10% / 1);
      }
    } */

    button {
      @apply text-base md:text-lg  lg:text-lg  mt-8  nunito pb-4 flex flex-col lg:flex-row  items-center gap-2 lg:gap-4 text-left shrink-0;
      grid-template-columns: auto 1fr;
      /* white-space: normal;
      word-wrap: break-word; */
      /* break-word: break-; */
      word-break: keep-all;

      .icon {
        @apply w-8 h-8 block;
      }

      &[aria-selected='true'] {
        @apply text-primary border-b-4 border-primary;
        .icon {
          @apply filter-primary;
        }
      }
      &[aria-selected='false'] {
        @apply text-black opacity-40;
      }
    }

    a.cta--download-pdf {
      @apply ml-auto;
    }

    #listen-article,
    #stop-reading {
      @apply rounded-full w-12 h-12 flex items-center justify-center m-0 p-0 transition-all duration-300;
    }
    #listen-article {
      @apply bg-primary text-white;
      &:hover {
        @apply scale-110;
      }
      img {
        @apply w-6 h-6;
      }
      &[data-reading-status='playing'] {
        /* @apply bg-blue-500; */
        @apply bg-white border border-primary;
        /* &:hover {
          @apply bg-red-500;
        } */
        #play-reading {
          @apply hidden;
        }
        #pause-reading {
          @apply block;
        }
      }

      &[data-reading-status='stopped'] {
        #play-reading {
          @apply block;
        }
        #pause-reading {
          @apply hidden;
        }
      }
      &[data-reading-status='paused'] {
        @apply bg-yellow-500;
        #play-reading {
          @apply block;
        }
        #pause-reading {
          @apply hidden;
        }
      }
    }
    #stop-reading {
      @apply bg-primary hidden;
      img {
        @apply w-4 h-4;
      }
    }
    &:has(
        #listen-article[data-reading-status='playing'],
        #listen-article[data-reading-status='paused']
      ) {
      #stop-reading {
        @apply flex;
      }
    }
  }

  .toolbar-actions {
    @apply flex items-center gap-3 ml-auto;

    @media screen and (max-width: 1024px) {
      @apply absolute left-0 translate-y-full;
      bottom: -20px;
    }
  }
}
body:has(
    .content-wrapper[data-active-tab='authors'],
    .content-wrapper[data-active-tab='references'],
    .content-wrapper[data-active-tab='table-of-contents'],
    .content-wrapper[data-active-tab='informations']
  ) {
  @media screen and (max-width: 1024px) {
    #article-toolbar {
      @apply mb-0;
    }
    .toolbar-actions {
      @apply !hidden;
    }
  }
}

#article-toolbar {
  @media screen and (max-width: 1024px) {
    @apply mb-16;
  }
}