@import 'highlight.js/styles/atom-one-dark.css';

@layer components {
  .code-viewer {
    @apply w-full rounded-primary border bg-white duration-300 dark:border-slate-700 dark:bg-slate-800;

    &-content {
      @apply overflow-auto rounded-t-primary bg-slate-50 p-4 dark:bg-slate-900 sm:p-6;
    }

    &-source {
      @apply hidden;
    }

    &-footer {
      @apply rounded-b-primary border-t px-6 py-3 dark:border-slate-700;

      & .btn-copy {
        @apply inline-flex items-center gap-2 text-sm font-medium text-slate-400 transition-colors duration-150 hover:text-slate-600 dark:text-slate-300 dark:hover:text-slate-400;

        &-success {
          @apply text-success-500 hover:text-success-600 dark:text-success-500 dark:hover:text-success-400;
        }
      }

      pre {
        @apply mt-4 overflow-hidden overflow-x-auto whitespace-nowrap rounded;

        code {
          @apply relative w-full min-w-max whitespace-pre-wrap bg-slate-900 p-4 text-base text-slate-200;
        }
      }
    }
  }
}
