cyca/resources/css/components/list.css

.list {
    &.vertical {
        @apply flex flex-col p-1;
    }

    &.horizontal {
        @apply flex flex-row flex-wrap p-0;
    }

    &.items-rounded > * {
        @apply rounded;
    }

    &.spaced > * {
        @apply mb-0.5;
    }

    &.compact > * {
        @apply py-1;
    }

    &.alt {
        @apply rounded;
        @apply bg-gray-50;
        @apply dark:bg-gray-850;
    }

    & > * {
        @apply px-2 py-2 flex-none;

        &.emphasize {
            @apply text-blue-300;
            @apply dark:text-gray-100;

            &:hover {
                @apply text-blue-500;
                @apply dark:text-white;
            }
        }

        &.list-item,
        & .list-item {
            @apply flex items-center justify-between space-x-1;

            & .list-item-text {
                @apply flex-grow truncate;
            }

            & .list-item-title {
                @apply mr-2 whitespace-nowrap;
            }

            & .list-item-value {
                @apply text-right;

                & code {
                    @apply break-all;
                }
            }
        }

        & .icons,
        & .badges,
        & .handle {
            @apply flex-none flex items-center space-x-1;
        }

        & .handle {
            cursor: ns-resize;
        }

        & .caret {
            @apply dark:text-gray-500;

            @apply w-4 h-4;
        }

        &.text-xs {
            & img,
            & svg,
            & .caret {
                max-width: 0.75rem;
                max-height: 0.75rem;
            }
        }

        & img,
        & svg,
        & .caret {
            width: 1rem;
            height: 1rem;
        }

        & img.favicon-lg {
            width: 2rem;
            height: 2rem;
			@apply flex-none;
        }

        &:hover {
            @apply bg-gray-200 text-gray-500;
            @apply dark:bg-gray-600 dark:text-gray-400;
        }

        &.selected {
            @apply bg-blue-500 text-white;
            @apply dark:bg-blue-800 dark:text-white;

            & .caret {
                @apply dark:text-gray-500;
            }

            &:hover {
                @apply bg-blue-400;
                @apply dark:bg-blue-700;
            }
        }

        &.dragged-over {
            @apply bg-green-200 text-gray-500;
            @apply dark:bg-green-800 dark:text-white;
        }

        &.cannot-drop {
            @apply bg-red-200 text-gray-500;
            @apply dark:bg-red-800 dark:text-white;
        }
    }

    &.striped > * {
        @apply odd:bg-white;
        @apply dark:odd:bg-gray-750;

        &.emphasize {
            &:hover {
                @apply text-blue-500;
                @apply dark:text-white;
            }
        }

        &:hover {
            @apply bg-gray-200 text-gray-500;
            @apply dark:bg-gray-600 dark:text-gray-400;
        }

        &.selected {
            @apply bg-blue-500 text-white;
            @apply dark:bg-blue-800 dark:text-white;

            & .caret {
                @apply dark:text-gray-500;
            }

            &:hover {
                @apply bg-blue-400 text-white;
                @apply dark:bg-blue-700;
            }
        }
    }
}