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

  .tablist {
    @apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary;
    position: relative;

    @media screen and (max-width: 1024px) {
      border-bottom: none;
      padding-bottom: 1em;

      /* Ligne de 1px à 5px du bord du bas */
      background: linear-gradient(
          to right,
          var(--wp--preset--color--primary, #136f63),
          var(--wp--preset--color--primary, #136f63)
        )
        bottom 2em center / 100% 1px no-repeat;

      /* Smooth scrolling pour mobile */
      -webkit-overflow-scrolling: touch;

      /* Propriétés standard pour Firefox mobile */
      scrollbar-width: thin;
      scrollbar-color: var(--wp--preset--color--primary, #136f63) #cef9ee;

      /* Webkit pour Chrome Android (iOS Safari ne supporte pas bien) */
      &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 8px;
        height: 8px;
      }

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

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

    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;
  }
}