app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
@import './loader.scss';

html.dark {
    color-scheme: dark
}

.log-item {
    @apply bg-white dark:bg-gray-800 transition duration-200 cursor-pointer;

    &.success {
        &:hover > td, &.active > td {
            @apply bg-emerald-50 dark:bg-emerald-800 dark:bg-opacity-40;
        }
        .log-level-indicator {
            @apply bg-emerald-700 dark:bg-emerald-500;
        }
        .log-level {
            @apply text-emerald-700 dark:text-emerald-500;
        }
    }

    &.info {
        &:hover > td, &.active > td {
            @apply bg-sky-50 dark:bg-sky-800 dark:bg-opacity-40;
        }
        .log-level-indicator {
            @apply bg-sky-700 dark:bg-sky-500;
        }
        .log-level {
            @apply text-sky-700 dark:text-sky-500;
        }
    }

    &.warning {
        &:hover > td, &.active > td {
            @apply bg-amber-50 dark:bg-amber-800 dark:bg-opacity-40;
        }
        .log-level-indicator {
            @apply bg-amber-700 dark:bg-amber-400;
        }
        .log-level {
            @apply text-amber-700 dark:text-amber-400;
        }
    }

    &.danger {
        &:hover > td, &.active > td {
            @apply bg-rose-50 dark:bg-rose-800 dark:bg-opacity-40;
        }
        .log-level-indicator {
            @apply bg-rose-700 dark:bg-rose-400;
        }
        .log-level {
            @apply text-rose-700 dark:text-rose-400;
        }
    }

    &.none {
        &:hover > td, &.active > td {
            @apply bg-gray-50 dark:bg-gray-800 dark:bg-opacity-40;
        }
        .log-level-indicator {
            @apply bg-gray-700 dark:bg-gray-400;
        }
        .log-level {
            @apply text-gray-700 dark:text-gray-400;
        }
    }
}

/** Level Badges **/
.badge {
    @apply inline-flex items-center text-sm cursor-pointer px-3 py-1 rounded-md mr-2 mt-1 transition duration-200;

    &.success {
        @apply border border-emerald-200 bg-emerald-50 text-gray-600
          dark:border-emerald-800 dark:bg-emerald-900 dark:bg-opacity-40 dark:text-gray-400;

        &:hover {
            @apply bg-emerald-100
              dark:bg-emerald-900 dark:bg-opacity-75;
        }

        .checkmark {
            @apply border-emerald-200
              dark:border-emerald-800;
        }

        &.active {
            @apply border-emerald-700 bg-emerald-600 text-white
              dark:border-emerald-600 dark:bg-emerald-700;
            &:hover {
                @apply bg-emerald-500
                  dark:bg-emerald-800;
            }
            .checkmark {
                @apply border-emerald-600
                  dark:border-emerald-700 dark:bg-emerald-100;
            }
            .checkmark > svg {
                @apply text-emerald-600
                  dark:text-emerald-700;
            }
        }
    }

    &.info {
        @apply border border-sky-200 bg-sky-50 text-gray-600
          dark:border-sky-800 dark:bg-sky-900 dark:bg-opacity-40 dark:text-gray-400;

        &:hover {
            @apply bg-sky-100
              dark:bg-sky-900 dark:bg-opacity-75;
        }

        .checkmark {
            @apply border-sky-200
              dark:border-sky-800;
        }

        &.active {
            @apply border-sky-700 bg-sky-600 text-white
              dark:border-sky-600 dark:bg-sky-700;

            &:hover {
                @apply bg-sky-500
                  dark:bg-sky-800;
            }
            .checkmark {
                @apply border-sky-600
                  dark:border-sky-700 dark:bg-sky-100;
            }
            .checkmark > svg {
                @apply text-sky-600
                  dark:text-sky-700;
            }
        }
    }

    &.warning {
        @apply border border-amber-200 bg-amber-50 text-gray-600
          dark:border-amber-800 dark:bg-amber-900 dark:bg-opacity-40 dark:text-gray-400;

        &:hover {
            @apply bg-amber-100
              dark:bg-amber-900 dark:bg-opacity-75;
        }

        & .checkmark {
            @apply border-amber-200
              dark:border-amber-800;
        }

        &.active {
            @apply border-amber-700 bg-amber-600 text-white
              dark:border-amber-600 dark:bg-amber-700;

            &:hover {
                @apply bg-amber-500
                  dark:bg-amber-800;
            }
            & .checkmark {
                @apply border-amber-600
                  dark:border-amber-700 dark:bg-amber-100;
            }
            & .checkmark > svg {
                @apply text-amber-600
                  dark:text-amber-700;
            }
        }
    }

    &.danger {
        @apply border border-rose-200 bg-rose-50 text-gray-600
          dark:border-rose-800 dark:bg-rose-900 dark:bg-opacity-40 dark:text-gray-400;

        &:hover {
            @apply bg-rose-100
              dark:bg-rose-900 dark:bg-opacity-75;
        }

        & .checkmark {
            @apply border-rose-200
              dark:border-rose-800;
        }

        &.active {
            @apply border-rose-700 bg-rose-600 text-white
              dark:border-rose-600 dark:bg-rose-700;

            &:hover {
                @apply bg-rose-500
                  dark:bg-rose-800;
            }
            & .checkmark {
                @apply border-rose-600
                  dark:border-rose-700 dark:bg-rose-100;
            }
            & .checkmark > svg {
                @apply text-rose-600
                  dark:text-rose-700;
            }
        }
    }

    &.none {
        @apply border border-gray-200 bg-gray-50 text-gray-600
          dark:border-gray-800 dark:bg-gray-900 dark:bg-opacity-40 dark:text-gray-400;

        &:hover {
            @apply bg-gray-100
              dark:bg-gray-900 dark:bg-opacity-75;
        }

        & .checkmark {
            @apply border-gray-200
              dark:border-gray-800;
        }

        &.active {
            @apply border-gray-700 bg-gray-600 text-white
              dark:border-gray-600 dark:bg-gray-700;

            &:hover {
                @apply bg-gray-500
                  dark:bg-gray-800;
            }
            & .checkmark {
                @apply border-gray-600
                  dark:border-gray-700 dark:bg-gray-100;
            }
            & .checkmark > svg {
                @apply text-gray-600
                  dark:text-gray-700;
            }
        }
    }
}

.log-list {
    table > thead th {
        @apply sticky top-0 z-10 bg-gray-100 dark:bg-gray-900 py-2 px-2 text-left text-sm font-semibold text-gray-500 dark:text-gray-400;
    }

    .log-group {
        @apply bg-white dark:bg-gray-800 dark:text-gray-200 relative;

        .log-item > td {
            @apply border-t border-gray-200 dark:border-gray-700 px-2 py-2 text-sm;
        }

        .log-item > td.log-level-icon {
            @apply whitespace-nowrap border-t border-gray-200 dark:border-gray-700 py-2 pl-4 pr-2 sm:pl-6 lg:pl-8;
            & > svg {
                @apply opacity-75 h-5 w-5;
            }
        }

        &.first {
            .log-item > td,
            .log-item > td.log-level-icon {
                @apply border-t-transparent;
            }
        }

        .log-stack {
            @apply px-4 py-2 sm:px-6 lg:px-8 border-gray-200 dark:border-gray-700 text-xs whitespace-pre-wrap break-all;
        }

        .log-link {
            @apply flex items-center w-full;
            min-width: 68px;

            & > svg {
                @apply h-4 w-4 ml-1 transition duration-200;
            }
        }

        code, mark {
            @apply bg-amber-200 text-gray-900 px-1 py-0.5 rounded
              dark:bg-yellow-800 dark:text-white;
        }
    }
}

.pagination {
    @apply mt-2 px-4 w-full flex items-center justify-center sm:px-0;

    .previous {
        @apply -mt-px w-0 flex-1 flex justify-end;

        button {
            @apply border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-gray-500 dark:text-gray-400;
            &:hover {
                @apply text-gray-700 border-gray-300
                  dark:text-gray-300 border-gray-400;
            }
            svg {
                @apply mx-3 h-5 w-5 text-current;
            }
        }
    }

    .next {
        @apply -mt-px w-0 flex-1 flex justify-start;

        button {
            @apply border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-gray-500 dark:text-gray-400;
            &:hover {
                @apply text-gray-700 border-gray-300
                  dark:text-gray-300 border-gray-400;
            }
            svg {
                @apply mx-3 h-5 w-5 text-current;
            }
        }
    }

    .pages {
        @apply hidden md:-mt-px md:flex;

        span {
            @apply border-transparent text-gray-500 dark:text-gray-400 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium;
        }

        button {
            @apply border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium;
        }
    }
}

.search {
    input {
        @apply border rounded-md pl-3 pr-10 py-2 text-sm w-full dark:bg-gray-800 border-gray-300 dark:border-gray-600 dark:text-gray-100 ring-2 ring-transparent transition duration-200;
        &:focus {
            @apply outline-none ring-emerald-500 dark:ring-emerald-700 border-transparent;
        }
    }
    &.has-error input {
        @apply border-red-600;
        &:focus {
            @apply outline-red-500 border-transparent;
        }
    }
    .clear-search {
        @apply absolute top-0 right-0 p-1.5;
        button {
            @apply text-gray-500 dark:text-gray-400 p-1;
            &:hover { @apply text-gray-600 dark:text-gray-300; }
            & > svg { @apply h-5 w-5; }
        }
    }
}

.dropdown {
    @apply absolute top-full z-40 right-1 -mt-1 overflow-hidden text-gray-900 dark:text-gray-200 rounded-md bg-white border-gray-200 dark:bg-gray-800 border dark:border-gray-700 shadow-md;

    transform-origin: top right !important;

    &.up {
        transform-origin: bottom right !important;
    }

    &.up {
        @apply top-auto bottom-full mt-0 -mb-1;
    }

    button, a {
        @apply block flex items-center w-full px-4 py-2 text-left text-sm outline-emerald-500 dark:outline-emerald-800;
        & > svg {
            @apply w-4 h-4 mr-3 text-gray-400;
            &.spin {
                // Spinner is slightly dimmer by default, especially because it's constantly spinning
                // and it's also a little smaller in size
                @apply text-gray-600;
            }
        }
    }
    button:hover, a:hover {
        @apply bg-gray-50 dark:bg-gray-700;
    }

    .divider {
        @apply w-full border-t my-2 dark:border-t-gray-700;
    }

    .label {
        @apply text-xs font-semibold text-gray-400 ml-4 my-1;
    }
}

// Dark border:         border-emerald-800
// Dark border (hover): border-emerald-700

.file-list {
    @apply relative h-full overflow-y-auto pt-6 pb-6 pr-4;

    .file-item-container,
    .folder-item-container {
        @apply relative mt-2 text-gray-800 dark:text-gray-200 rounded-md bg-white dark:bg-gray-800;

        .file-item {
            @apply relative flex justify-between items-center pl-4 pr-10 py-2 rounded-md border cursor-pointer border-transparent transition duration-100;

            .file-icon {
                @apply mr-2 text-gray-400 dark:text-gray-500;
                &>svg {
                    @apply w-4 h-4;
                }
            }

            .file-name {
                @apply text-sm mr-3 w-full;
            }

            .file-size {
                @apply text-xs text-gray-500 dark:text-gray-300 dark:opacity-90 whitespace-nowrap;
            }
        }

        &.active .file-item {
            @apply border-emerald-500 dark:border-emerald-900 bg-emerald-50 dark:bg-emerald-900 dark:bg-opacity-40;
        }

        &:hover .file-item {
            @apply border-emerald-600 dark:border-emerald-800;
        }

        .file-dropdown-toggle {
            @apply absolute top-0 right-0 bottom-0 w-8 flex rounded-r-md items-center justify-center border-l border-transparent text-gray-500 dark:text-gray-400 outline-emerald-500 dark:outline-emerald-700 transition duration-200;
            &:hover {
                @apply border-emerald-600 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-900;
            }
            & > svg {
                @apply h-4 w-4;
            }
        }
    }

    .folder-container {
        .folder-item-container {
            &.sticky {
                position: -webkit-sticky;
                position: sticky;
            }

            & > .file-item {
                @apply pr-4;
            }
        }
    }
}

.menu-button {
    @apply relative p-2 text-gray-400 rounded-md outline-emerald-500 cursor-pointer transition duration-200;

    &:hover {
        @apply text-gray-500 dark:text-gray-300;
    }

    &:focus {
        @apply outline-none ring-2 ring-emerald-500 dark:ring-emerald-700;
    }
}