/* TRIX CUSTOMIZATION START */
@charset "UTF-8";

@utility no-scrollbar {
    -ms-overflow-style: none;
    /* IE/old Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* WebKit scrollbar hiding must be a regular selector */
.no-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

@layer base {

    trix-toolbar {
        @apply sticky top-0 border-0 bg-base-200 z-10 w-full max-w-full box-border;
    }

    /* Already had overflow-x-auto; add padding guards + no-scrollbar */
    .trix-button-row {
        @apply flex flex-nowrap justify-between overflow-x-auto no-scrollbar gap-2 px-2;
    }

    /* Prevent groups from growing wider than needed */
    .trix-button-group {
        @apply flex mb-2 rounded-lg shadow-sm overflow-hidden min-w-0;
    }

    .trix-button-group-spacer {
        @apply flex-grow;
    }

    .trix-button {
        @apply relative bg-neutral-content hover:bg-neutral font-normal text-base text-neutral whitespace-nowrap outline-none transition-colors duration-200 px-2 py-1;

        &:not(:first-child) {
            @apply border-l border-l-base-300;
        }

        &.trix-active {
            @apply bg-primary text-primary-content;
        }

        &:not(:disabled) {
            @apply cursor-pointer;
        }

        svg {
            @apply w-4 h-4 fill-current stroke-current;
        }
    }

    .trix-button--icon {
        @apply bg-neutral-content hover:bg-neutral w-8 h-8 p-0;

        text-indent: -9999px;

        &::before {
            @apply inline-block absolute opacity-60 content-[''] bg-center bg-no-repeat bg-contain inset-[0.4rem];
        }

        &:hover {
            @apply bg-accent text-accent-content;
        }

        &.trix-active::before {
            @apply opacity-100;
        }
    }

    .trix-button:disabled {
        @apply opacity-50 cursor-not-allowed;
    }

    /* SVG icons */
    .trix-button--icon-attach::before {
        background-image: url("/trix/attach.svg") !important;
    }

    .trix-button--icon-bold::before {
        background-image: url("/trix/bold.svg") !important;
    }

    .trix-button--icon-italic::before {
        background-image: url("/trix/italic.svg") !important;
    }

    .trix-button--icon-strike::before {
        background-image: url("/trix/strikethrough.svg") !important;
    }

    .trix-button--icon-link::before {
        background-image: url("/trix/link.svg") !important;
    }

    .trix-button--icon-heading-1::before {
        background-image: url("/trix/heading.svg") !important;
    }

    .trix-button--icon-quote::before {
        background-image: url("/trix/quote.svg") !important;
    }

    .trix-button--icon-code::before {
        background-image: url("/trix/code.svg") !important;
    }

    .trix-button--icon-bullet-list::before {
        background-image: url("/trix/bullet-list.svg") !important;
    }

    .trix-button--icon-number-list::before {
        background-image: url("/trix/number-list.svg") !important;
    }

    .trix-button--icon-decrease-nesting-level::before {
        background-image: url("/trix/decrease-nesting-level.svg") !important;
    }

    .trix-button--icon-increase-nesting-level::before {
        background-image: url("/trix/increase-nesting-level.svg") !important;
    }

    .trix-button--icon-undo::before {
        background-image: url("/trix/undo.svg") !important;
    }

    .trix-button--icon-redo::before {
        background-image: url("/trix/redo.svg") !important;
    }

    /* Common styles for editor and content */
    trix-editor,
    .trix-content {
        /* was: @apply w-full h-full max-w-none p-2; */
        @apply w-full max-w-full p-2 box-border;
    }

    trix-editor {
        @apply border border-base-300 rounded-md bg-base-100 p-2;
        min-height: 10rem;
        max-width: 100%;
        box-sizing: border-box;
    }


    trix-editor:focus {
        @apply outline-none border-primary ring-1 ring-primary;
    }

    :where(trix-editor, .trix-content) a {
        @apply link link-accent;
    }

    :where(trix-editor, .trix-content) a:not(.no-underline) {
        @apply underline;
    }

    :where(trix-editor, .trix-content) a:visited {
        @apply link;
    }

    :where(trix-editor, .trix-content) h1 {
        @apply text-3xl sm:text-5xl font-extrabold mb-6;
    }

    :where(trix-editor, .trix-content) h2 {
        @apply text-2xl sm:text-3xl font-bold mb-4;
    }

    :where(trix-editor, .trix-content) blockquote {
        @apply text-left py-3 px-8 my-8 mx-auto text-base-content bg-base-200 dark:bg-base-300 border-l-accent rounded-s;

        &::before,
        &::after {
            @apply text-center block h-6 w-6 text-3xl font-semibold italic text-accent float-left rounded-full;

            content: open-quote;
        }

        &::after {
            @apply float-right;

            content: close-quote;
        }

        &:hover::before,
        &:hover::after {
            @apply font-extrabold;

            transition: all 350ms;
        }
    }

    :where(trix-editor, .trix-content) ul {
        list-style-type: disc;
        padding-left: 1rem;

        li {
            list-style: disc;
            margin-left: 1rem;
        }
    }

    :where(trix-editor, .trix-content) ol {
        list-style-type: decimal;
        padding-left: 1rem;

        li {
            list-style: decimal;
            margin-left: 1rem;
        }
    }

    /* Images/videos never exceed the container */
    :where(trix-editor, .trix-content) img,
    :where(trix-editor, .trix-content) video {
        max-width: 100%;
        height: auto;
    }

    /* Code blocks scroll instead of widening the page */
    :where(trix-editor, .trix-content) pre,
    :where(trix-editor, .trix-content) .code {
        display: block; /* was inline-block */
        width: 100%;
        max-width: 100%;
        overflow-x: auto; /* keep horizontal scroll inside the block */
        box-sizing: border-box;
    }

    /* Blockquotes: smaller padding on mobile */
    :where(trix-editor, .trix-content) blockquote {
        @apply text-left py-3 px-4 sm:px-8 my-8 mx-auto;
    }

    /* Gallery items wrap and respect container width */
    .attachment-gallery {
        display: flex;
        flex-wrap: wrap;
    }

    .attachment-gallery > action-text-attachment,
    .attachment-gallery > .attachment {
        max-width: 100%;
    }

    @media (min-width: 640px) {
        .attachment-gallery > action-text-attachment,
        .attachment-gallery > .attachment {
            max-width: 50%;
        }
    }

    @media (min-width: 1024px) {
        .attachment-gallery > action-text-attachment,
        .attachment-gallery > .attachment {
            max-width: 33%;
        }
    }

    action-text-attachment {
        figure img {
            @apply rounded-lg shadow-xl;
        }

        .attachment {
            padding: 0 !important;
            max-width: 100% !important;
        }
    }
}

/* TRIX CUSTOMIZATION STOP */