section.colors {
    @apply m-4;
}

.colors {
    @apply my-4;

    > .item {
        @apply mr-2 mb-2 inline-block text-center;

        > .color {
            @apply block w-14 h-14 rounded-full;

            &.color--red.default {
                @apply bg-red;
            }
            &.color--red.mod-100 {
                @apply bg-red-100;
            }
            &.color--red.mod-200 {
                @apply bg-red-200;
            }
            &.color--red.mod-300 {
                @apply bg-red-300;
            }
            &.color--red.mod-400 {
                @apply bg-red-400;
            }
            &.color--red.mod-500 {
                @apply bg-red-500;
            }
            &.color--red.mod-600 {
                @apply bg-red-600;
            }
            &.color--red.mod-700 {
                @apply bg-red-700;
            }
            &.color--red.mod-800 {
                @apply bg-red-800;
            }
            &.color--red.mod-900 {
                @apply bg-red-900;
            }

            &.color--black.default {
                @apply bg-black;
            }
            &.color--black.mod-100 {
                @apply bg-black-100;
            }
            &.color--black.mod-200 {
                @apply bg-black-200;
            }
            &.color--black.mod-300 {
                @apply bg-black-300;
            }
            &.color--black.mod-400 {
                @apply bg-black-400;
            }
            &.color--black.mod-500 {
                @apply bg-black-500;
            }
            &.color--black.mod-600 {
                @apply bg-black-600;
            }
            &.color--black.mod-700 {
                @apply bg-black-700;
            }
            &.color--black.mod-800 {
                @apply bg-black-800;
            }
            &.color--black.mod-900 {
                @apply bg-black-900;
            }

            &.color--gray.default {
                @apply bg-gray;
            }
            &.color--gray.mod-100 {
                @apply bg-gray-100;
            }
            &.color--gray.mod-200 {
                @apply bg-gray-200;
            }
            &.color--gray.mod-300 {
                @apply bg-gray-300;
            }
            &.color--gray.mod-400 {
                @apply bg-gray-400;
            }
            &.color--gray.mod-500 {
                @apply bg-gray-500;
            }
            &.color--gray.mod-600 {
                @apply bg-gray-600;
            }
            &.color--gray.mod-700 {
                @apply bg-gray-700;
            }
            &.color--gray.mod-800 {
                @apply bg-gray-800;
            }
            &.color--gray.mod-900 {
                @apply bg-gray-900;
            }

            &.color--orange.default {
                @apply bg-orange;
            }
            &.color--orange.mod-100 {
                @apply bg-orange-100;
            }
            &.color--orange.mod-200 {
                @apply bg-orange-200;
            }
            &.color--orange.mod-300 {
                @apply bg-orange-300;
            }
            &.color--orange.mod-400 {
                @apply bg-orange-400;
            }
            &.color--orange.mod-500 {
                @apply bg-orange-500;
            }
            &.color--orange.mod-600 {
                @apply bg-orange-600;
            }
            &.color--orange.mod-700 {
                @apply bg-orange-700;
            }
            &.color--orange.mod-800 {
                @apply bg-orange-800;
            }
            &.color--orange.mod-900 {
                @apply bg-orange-900;
            }

            &.color--blue.default {
                @apply bg-blue;
            }
            &.color--blue.mod-100 {
                @apply bg-blue-100;
            }
            &.color--blue.mod-200 {
                @apply bg-blue-200;
            }
            &.color--blue.mod-300 {
                @apply bg-blue-300;
            }
            &.color--blue.mod-400 {
                @apply bg-blue-400;
            }
            &.color--blue.mod-500 {
                @apply bg-blue-500;
            }
            &.color--blue.mod-600 {
                @apply bg-blue-600;
            }
            &.color--blue.mod-700 {
                @apply bg-blue-700;
            }
            &.color--blue.mod-800 {
                @apply bg-blue-800;
            }
            &.color--blue.mod-900 {
                @apply bg-blue-900;
            }

            &.color--turquoise.default {
                @apply bg-turquoise;
            }
            &.color--turquoise.mod-100 {
                @apply bg-turquoise-100;
            }
            &.color--turquoise.mod-200 {
                @apply bg-turquoise-200;
            }
            &.color--turquoise.mod-300 {
                @apply bg-turquoise-300;
            }
            &.color--turquoise.mod-400 {
                @apply bg-turquoise-400;
            }
            &.color--turquoise.mod-500 {
                @apply bg-turquoise-500;
            }
            &.color--turquoise.mod-600 {
                @apply bg-turquoise-600;
            }
            &.color--turquoise.mod-700 {
                @apply bg-turquoise-700;
            }
            &.color--turquoise.mod-800 {
                @apply bg-turquoise-800;
            }
            &.color--turquoise.mod-900 {
                @apply bg-turquoise-900;
            }

            &.color--purple.default {
                @apply bg-purple;
            }
            &.color--purple.mod-100 {
                @apply bg-purple-100;
            }
            &.color--purple.mod-200 {
                @apply bg-purple-200;
            }
            &.color--purple.mod-300 {
                @apply bg-purple-300;
            }
            &.color--purple.mod-400 {
                @apply bg-purple-400;
            }
            &.color--purple.mod-500 {
                @apply bg-purple-500;
            }
            &.color--purple.mod-600 {
                @apply bg-purple-600;
            }
            &.color--purple.mod-700 {
                @apply bg-purple-700;
            }
            &.color--purple.mod-800 {
                @apply bg-purple-800;
            }
            &.color--purple.mod-900 {
                @apply bg-purple-900;
            }

            &.color--lime.default {
                @apply bg-lime;
            }
            &.color--lime.mod-100 {
                @apply bg-lime-100;
            }
            &.color--lime.mod-200 {
                @apply bg-lime-200;
            }
            &.color--lime.mod-300 {
                @apply bg-lime-300;
            }
            &.color--lime.mod-400 {
                @apply bg-lime-400;
            }
            &.color--lime.mod-500 {
                @apply bg-lime-500;
            }
            &.color--lime.mod-600 {
                @apply bg-lime-600;
            }
            &.color--lime.mod-700 {
                @apply bg-lime-700;
            }
            &.color--lime.mod-800 {
                @apply bg-lime-800;
            }
            &.color--lime.mod-900 {
                @apply bg-lime-900;
            }

            &.color--monza.default {
                @apply bg-monza;
            }
            &.color--monza.mod-100 {
                @apply bg-monza-100;
            }
            &.color--monza.mod-200 {
                @apply bg-monza-200;
            }
            &.color--monza.mod-300 {
                @apply bg-monza-300;
            }
            &.color--monza.mod-400 {
                @apply bg-monza-400;
            }
            &.color--monza.mod-500 {
                @apply bg-monza-500;
            }
            &.color--monza.mod-600 {
                @apply bg-monza-600;
            }
            &.color--monza.mod-700 {
                @apply bg-monza-700;
            }
            &.color--monza.mod-800 {
                @apply bg-monza-800;
            }
            &.color--monza.mod-900 {
                @apply bg-monza-900;
            }

            &.color--deepblue.default {
                @apply bg-deepblue;
            }
            &.color--deepblue.mod-100 {
                @apply bg-deepblue-100;
            }
            &.color--deepblue.mod-200 {
                @apply bg-deepblue-200;
            }
            &.color--deepblue.mod-300 {
                @apply bg-deepblue-300;
            }
            &.color--deepblue.mod-400 {
                @apply bg-deepblue-400;
            }
            &.color--deepblue.mod-500 {
                @apply bg-deepblue-500;
            }
            &.color--deepblue.mod-600 {
                @apply bg-deepblue-600;
            }
            &.color--deepblue.mod-700 {
                @apply bg-deepblue-700;
            }
            &.color--deepblue.mod-800 {
                @apply bg-deepblue-800;
            }
            &.color--deepblue.mod-900 {
                @apply bg-deepblue-900;
            }
        }

        > .color-description {
            @apply text-sm;
        }
    }
}