/*
 * Style Guide
 */
.styleGuideWrap {
    .clearfix();
    .wrapper();
    padding: (@margin * 2) 0;

    @media @tablet, @mobile {
        padding: @margin;
    }

    .styleGuideSectionMainTitle {
        .clearfix();
        padding: (@margin * 4) 0;
        width: 100%;

        @media @mobile {
            padding: 20px 0 40px;
        }

        h1 {
            margin: 0;
        }
    }

    section {
        .clearfix();
        clear: both;
        width: 100%;
        max-width: 600px;
        margin: 0 auto 80px;

        .styleGuideSectionTitle {
            text-transform: uppercase;
            .rems(13);
            margin: 0 0 20px;
            font-weight: normal;
            letter-spacing: 0;
        }
    }
}

/*
 * Colour Swatches
 */
.colourSwatchWrap {
    .clearfix();
    clear: both;

    ul {
        .clearfix();
        margin: 0;
        padding: 0;

        li {
            color: #fff;
            list-style-type: none;
            float: left;
            text-align: center;
            width: 124px;
            margin: 0 20px 20px 0;
            background: @primary_color;
            height: 80px;
            text-align: center;
            .rems(11);
            padding: 0;

            &:nth-child(4n) {
                margin-right: 0;
            }

            &:nth-child(4n + 1) {
                clear: both;
            }

            span {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                display: block;
            }

            &:nth-child(1) {
                background: @primary_color;
            }

            &:nth-child(2) {
                background: @secondary_color;
            }

            &:nth-child(3) {
                background: @dark_color;
            }

            &:nth-child(4) {
                background: @light_color;
                color: @dark_text_color;
            }

            &:nth-child(5) {
                background: 0;
                border: 1px solid @border_color;
                border-radius: @border_radius;
                color: @dark_text_color;
            }

            &:nth-child(6) {
                background: @alert_color;
            }

            &:nth-child(7) {
                background: @information_color;
            }

            &:nth-child(8) {
                background: @success_color;
            }

            &:nth-child(9) {
                background: @text_color;
            }

            &:nth-child(10) {
                background: @highlight_color;
            }
        }
    }
}