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