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-description {
            @apply text-sm;
        }
    }
}