@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.uncoloured-prose {
    @apply prose;
    --tw-prose-body: inherit;
    --tw-prose-bullets: inherit;
}

/* Note this is a complex collection of classes which are ORDER DEPENDENT. */
.flight-plan-table {
    .past-block {
        @apply text-gray-400 bg-gray-300;

        /* We use a grayscale here as this will colour all elements in the block, not just text. */
        filter: grayscale(1);
    }

    .unselected-speaker {
        @apply bg-gray-200;
    }

    .active-block {
        @apply bg-blue-200;
    }

    /* When we are in the small view class, we hide producer content whether or not the user has show_producer enabled */

    @media (max-width: 640px) {
        .producer-cell {
            display: none;
        }
    }

    @media (max-width: 640px) {
        .section-cell {
            background-color: #9dd5ca
        }

        .section-cell.unselected-speaker {
            @apply bg-gray-300;
        }

        .section-cell.active-block {
            @apply bg-blue-300;
        }
    }

    .fp-block {
        display: grid;
        grid-template-columns: subgrid;
        gap: 1px;

        @media (min-width: 640px) {
            grid-column: 1 / 4;
        }

        @media (max-width: 640px) {
            grid-column: 1 / 2;
        }
    }
}

/* Size class helpers */
.sc\:large {
    @media (max-width: 640px) {
        display: none;
    }
}

.sc\:small {
    @media (min-width: 641px) {
        display: none;
    }
}

/* Chat message styling (also attaches to BOR halfway messages) */
.chat-message-container[data-controller="chat-message"] {
    &[data-chat-message-copied-value="true"] {
        @apply bg-slate-300;
    }

    &[data-chat-message-copied-value="false"][data-chat-message-broadcast-value="true"] {
        @apply bg-purple-300;
    }

    &[data-chat-message-copied-value="false"][data-chat-message-broadcast-value="false"] {
        @apply bg-blue-300;
    }

    & [data-chat-message-target="message"] {
        @apply uncoloured-prose;
        line-height: 1.5rem;

        li > p {
            @apply inline
        }

        a {
            word-break: break-all;
        }
    }
}

.reset-links a {
    @apply text-blue-500;
    @apply hover:underline;
}

.form-styles {
    & select {
        @apply mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-mainGreen focus:border-mainGreen sm:text-sm rounded-md;
    }

    & label {
        @apply block text-sm font-medium text-gray-700;
    }

    & input[type=checkbox] {
        @apply h-4 w-4 text-mainGreen focus:ring-mainGreen border-gray-300 rounded;
    }

    & input[type=submit] {
        @apply inline-flex justify-center rounded-md border border-transparent bg-mainGreen px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-accentGreen focus:outline-none focus:ring-2 focus:ring-mainGreen focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-400;
    }

    & input[type=text], & input[type=datetime-local], & input[type=number], & textarea {
        @apply focus:outline-none focus:ring-mainGreen focus:border-mainGreen;
    }
}

.close-to-projected-end .flash-close-to-end {
    animation: close-to-end-flash 1s infinite;
}

@-webkit-keyframes close-to-end-flash {
    0%, 49% {
        /* bg-green-200 */
        background-color: #bbf7d0;
    }
    50%, 100% {
        /* bg-amber-200 */
        background-color: #fde68a;
    }
}

/* Block content styles */

.markdown-renderable-notes {
    @apply uncoloured-prose;

    /* Fixed formatting */

    & strong {
        @apply bg-cyan-200;
        font-weight: inherit;
    }

    /* Spoken formatting */

    & ul {
        @apply font-semibold;
    }

    /* TODO: There must be a better way to do this? We are essential doing margin collapse
         I think we would need to do block content as div.background-colour > div.margins as margins are outside of the
         background colour.
         */
    & > p:first-child {
        @apply mt-0;
    }

    & > p:last-child {
        @apply mb-0;
    }
}

.spoken-fixed .text {
    @apply bg-cyan-200;
}

.instruction {
    @apply uncoloured-prose;
    line-height: 1.5rem;
}

.instruction:first-child > p:first-child {
    @apply mt-0;
}

.instruction:last-child > p:last-child {
    @apply mb-0;
}

.spoken {
    @apply uncoloured-prose font-semibold;

    & > p {
        @apply my-0;
    }

    /* Remove double disc in spoken content */
    &:has(> ul:only-child) {
        list-style: none;
    }
}