color {
    header {
        transition: all 240ms ease-in-out;

        h1 {
            color: $grass;
        }

        h2,
        p {
            color: $dark;
        }

        h1,
        h2,
        p {
            transition: color 240ms ease-in-out;
            transition-delay: 100ms;
        }
        position: relative;

        & > div {
            z-index: 1;
        }

        .background-boxes {
            position: absolute;
            width: 50%;
            height: 100%;
            top: 0;
            left: 50%;
            right: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            z-index: 0;
            justify-content: flex-end;
            background: $background;
            transition: background 240ms ease-in-out;

            > * {
                transition: all 120ms ease-in-out;
                padding: 15px;
                margin: 15px;
                border-radius: 3px;

                &:hover {
                    transform: scale(1.7);
                    border-radius: 50%;
                }
            }
            @each $entity, $color in $entity-colors {
                .bb-#{$entity} {
                    $randNum: random(20) + 25px;
                    background: $color;
                    width: $randNum;
                    height: $randNum;
                }
            }
            @each $analytics, $color in $analytics-colors {
                .bb-#{$analytics} {
                    $randNum: random(20) + 25px;
                    background: $color;
                    width: $randNum;
                    height: $randNum;
                }
            }
        }
    }

    article {
        &.color-blocks {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: flex-end;
            width: 100%;

            .block {
                text-align: center;
                height: 150px;
                width: 25%;
                min-width: 200px;
                position: relative;
                padding-top: 140px;
                margin-bottom: 95px;

                &:active,
                &:focus,
                &:hover {
                    .color-square {
                        transform: scale(1.125);
                    }
                }

                h6 {
                    text-align: left;
                }

                span.vars {
                    opacity: 0.65;
                    text-align: left;
                    display: block;
                }

                h6,
                span.vars {
                    padding-left: 6%;
                }

                .color-square {
                    height: 130px;
                    width: 90%;
                    position: absolute;
                    top: 0;
                    left: 5%;
                    background: white;
                    transition: all 80ms ease-in-out;
                    border-radius: 2px;
                    cursor: pointer;
                }

                h3.color-text {
                    color: #fff;
                    position: absolute;
                    top: 45%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 0.85;
                    font-weight: 600;
                    padding: 7px 0;
                    cursor: pointer;

                    &:after {
                        content: 'Click to copy';
                        position: absolute;
                        color: rgba(255, 255, 255, 0.4);
                        left: 50%;
                        top: 40px;
                        font-size: 10px;
                        text-transform: uppercase;
                        transform: translateX(-50%);
                        width: 100%;
                    }

                    span {
                        font-size: 0.9em;
                        opacity: 0.45;
                    }
                }

                &.nav-cb {
                    .color-square {
                        background: $navigation;
                    }
                }

                &.action-cb {
                    .color-square {
                        background: $positive;
                    }
                }

                &.text-cb {
                    .color-square {
                        background: $dark;
                    }
                }

                &.neutral-cb {
                    .color-square {
                        background: $neutral;
                    }
                }

                &.background-cb {
                    color: $dark;

                    h3 {
                        &:after {
                            content: 'Click to copy';
                            position: absolute;
                            color: rgba($dark, 0.4);
                            left: 50%;
                            top: 40px;
                            font-size: 10px;
                            text-transform: uppercase;
                            transform: translateX(-50%);
                            width: 100%;
                        }
                    }

                    .color-text {
                        color: $dark;
                    }

                    .color-square {
                        background: $background;
                    }
                }
                @each $entity, $color in $entity-colors {
                    &.#{$entity}-cb {
                        .color-square {
                            background: $color;
                        }
                    }
                }
                @each $analytics, $color in $analytics-colors {
                    &.#{$analytics}-cb {
                        .color-square {
                            background: $color;
                        }
                    }
                }
            }
        }
    }
}

color {
    & > header {
        @each $analytics, $color in $analytics-colors {
            &.#{$analytics} {
                h1,
                h2,
                p {
                    color: #fff;
                }
                background: $color !important;

                .background-boxes {
                    background: $color !important;
                }
            }
        }
        @each $entity, $color in $entity-colors {
            &.#{$entity} {
                h1,
                h2,
                p {
                    color: #fff;
                }
                background: $color !important;

                .background-boxes {
                    background: $color !important;
                }
            }
        }

        &.background {
            background: $background;

            .background-boxes {
                background: $background;
            }
        }
    }
}