@import '../../less/fonts/din-next-lt-pro/medium';
@import '../../less/fonts/din-next-lt-pro/medium-italic';
@import '../../less/fonts/din-next-lt-pro/regular';
@import '../../less/fonts/din-next-lt-pro/bold';
@import '../../less/palette';
@import '../../less/grid';

body {
    .din-next-lt-pro-regular;
    padding-bottom: 180px;
    margin: 0;
}

section {
    max-width: 900px;
    padding: 30px 20px 30px;
    font-size: 14px;
    margin: 0 auto;

    &:first-of-type {
        padding-top: 70px;
    }

    h1 {
        text-align: center;
        text-transform: uppercase;
        font-size: 32px;
        color: #ccc;
        .din-next-lt-pro-bold;
    }

    h3 {
        clear: both;
        margin: 40px 0 20px;
        font-size: 24px;
        border-bottom: 1px solid #efefef;
        .din-next-lt-pro-bold;
    }

    h4 {
        .din-next-lt-pro-bold;
        margin: 8px 0;
    }

    #pane {
        >div >.button {
            display: inline-block;
            margin-right: 8px;
        }
    }

    .variations {
        display: table;
        width: 100%;

        > div {
            display: inline-block;
            width: 45%;
            float: left;
        }

        > div:nth-child(2n) {
            float: right;
        }
    }

    &#colors {
        > div {
            padding: 0 32px;
            display: inline-block;
            vertical-align: top;
        }

        > div div {
            height: 40px;
            width: 200px;
            margin: 4px auto;
            color: white;
        }

        .primary {
            .illegal-white {
                background-color: @color-illegal-white;
                color: black;
            }

            .off-white {
                background-color: @color-off-white;
                color: black;
            }

            .separator-tap {
                background-color: @color-separator;
                color: black;
            }

            .border {
                background-color: @color-border;
                color: black;
            }

            .disabled-hint {
                background-color: @color-hint;
                color: black;
            }

            .secondary {
                background-color: @color-secondary;
            }

            .link {
                background-color: @color-link;
            }

            .primary {
                background-color: @color-primary;
            }

            .dark {
                background-color: @color-primary-dark;
            }
        }

        .inverse {
            .off-white {
                background-color: @color-off-white-i;
            }

            .separator-tap {
                background-color: @color-separator-i;
            }

            .border {
                background-color: @color-border-i;
            }

            .disabled-hint {
                background-color: @color-hint-i;
            }

            .secondary {
                background-color: @color-secondary-i;
                color: black;
            }

            .link {
                background-color: @color-link-i;
                color: black;
            }

            .primary {
                background-color: @color-primary-i;
                color: black;
                border: 1px solid #eee;
            }
        }

        .partner {
            @import '../../less/palette-brand-partner';

            .disabled {
                background-color: @color-brand-disabled;
                color: black;
            }

            .secondary {
                background-color: @color-brand-secondary;
                color: black;
            }

            .primary {
                background-color: @color-brand;
            }

            .hover {
                background-color: @color-brand-hover;
            }

            .active {
                background-color: @color-brand-active;
            }
        }

        .buyer {
            @import '../../less/palette-brand-buyer';

            .disabled {
                background-color: @color-brand-disabled;
                color: black;
            }

            .secondary {
                background-color: @color-brand-secondary;
                color: black;
            }

            .primary {
                background-color: @color-brand;
            }

            .hover {
                background-color: @color-brand-hover;
            }

            .active {
                background-color: @color-brand-active;
            }
        }

        .fleet {
            @import '../../less/palette-brand-fleet';

            .disabled {
                background-color: @color-brand-disabled;
                color: black;
            }

            .secondary {
                background-color: @color-brand-secondary;
                color: black;
            }

            .primary {
                background-color: @color-brand;
            }

            .hover {
                background-color: @color-brand-hover;
            }

            .active {
                background-color: @color-brand-active;
            }
        }
    }

    &#palettes {

        h1 {
            padding: 64px 8px;
            border-top: 1px solid #efefef;
        }

        h3 {
            padding: 16px 8px;
            border-bottom: none;
        }

        .palette {
            display: table;
            margin: -8px;
        }

        .color {
            display: inline-block;
            width: 33.33%;
            float: left;
            padding: 8px;

            p {
                white-space: nowrap;
                padding: 16px;
                overflow: hidden;
                border: 1px solid #efefef;
                border-top: none;
                border-radius: 0px 0px 4px 4px;
                background-color: white;
            }

            &-swatch {
                min-height: 150px;
                display: block;
                padding: 8px;
                border-radius: 4px 4px 0px 0px;
            }

            &-label {
                display: block;

                &:before {
                    display: block;
                    .din-next-lt-pro-bold;
                    font-size: 16px;
                    padding: 4px 0 8px;
                    content: "";
                }

                &:after {
                    display: block;
                    .din-next-lt-pro-regular;
                    text-transform: uppercase;
                    content: "";
                }
            }

            &--isAlpha {
                background-color: #8033cc;

                p {
                    border: none;
                }
            }
        }

        // Mixin to make life easier
        .createSwatch(@_class, @_swatch) {
            .@{_class} {
                .color-swatch { background-color: @_swatch; }
                .color-label:before { content: "@@{_class}"; }
                .color-label:after { content: "@{_swatch}"; }
            }
        }

        .core {
            @import '../../less/palettes/palette';

            /* Core Colors */
            .createSwatch(color-primary, @color-primary);
            .createSwatch(color-secondary, @color-secondary);
            .createSwatch(color-disabled, @color-disabled);
            .createSwatch(color-hint, @color-hint);
            .createSwatch(color-border, @color-border);
            .createSwatch(color-separator, @color-separator);
            .createSwatch(color-background-dark, @color-background-dark);
            .createSwatch(color-background-light, @color-background-light);
            .createSwatch(color-hover, @color-hover);

            /* Core Colors As Alpha */
            .createSwatch(color-primary-a, @color-primary-a);
            .createSwatch(color-secondary-a, @color-secondary-a);
            .createSwatch(color-disabled-a, @color-disabled-a);
            .createSwatch(color-hint-a, @color-hint-a);
            .createSwatch(color-border-a, @color-border-a);
            .createSwatch(color-separator-a, @color-separator-a);
            .createSwatch(color-background-dark-a, @color-background-dark-a);
            .createSwatch(color-background-light-a, @color-background-light-a);
            .createSwatch(color-hover-a, @color-hover-a);

            /* Inverted Core Colors */
            .createSwatch(color-primary-i, @color-primary-i);
            .createSwatch(color-secondary-i, @color-secondary-i);
            .createSwatch(color-disabled-i, @color-disabled-i);
            .createSwatch(color-hint-i, @color-hint-i);
            .createSwatch(color-border-i, @color-border-i);
            .createSwatch(color-separator-i, @color-separator-i);
            .createSwatch(color-background-dark-i, @color-background-dark-i);
            .createSwatch(color-background-light-i, @color-background-light-i);
            .createSwatch(color-hover-i, @color-hover-i);

            /* Core Reserved Warning Colors */
            .createSwatch(color-warning-primary, @color-warning-primary);
            .createSwatch(color-warning-secondary, @color-warning-secondary);
            .createSwatch(color-warning-disabled, @color-warning-disabled);
            .createSwatch(color-warning-hint, @color-warning-hint);
            .createSwatch(color-warning-border, @color-warning-border);
            .createSwatch(color-warning-separator, @color-warning-separator);
            .createSwatch(color-warning-background, @color-warning-background);
            .createSwatch(color-warning-active, @color-warning-active);
            .createSwatch(color-warning-hover, @color-warning-hover);

            /* Core Reserved Error Colors */
            .createSwatch(color-error-primary, @color-error-primary);
            .createSwatch(color-error-secondary, @color-error-secondary);
            .createSwatch(color-error-disabled, @color-error-disabled);
            .createSwatch(color-error-hint, @color-error-hint);
            .createSwatch(color-error-border, @color-error-border);
            .createSwatch(color-error-separator, @color-error-separator);
            .createSwatch(color-error-background, @color-error-background);
            .createSwatch(color-error-active, @color-error-active);
            .createSwatch(color-error-hover, @color-error-hover);
        }

        /* Buyer Colors */
        .buyer-brand {
            @import '../../less/palettes/palette-brand-buyer';
            .createSwatch(color-brand-primary, @color-brand-primary);
            .createSwatch(color-brand-primary, @color-brand-primary);
            .createSwatch(color-brand-border, @color-brand-border);
            .createSwatch(color-brand-background, @color-brand-background);
            .createSwatch(color-brand-active, @color-brand-active);
            .createSwatch(color-brand-hover, @color-brand-hover);
            .createSwatch(color-brand-alt, @color-brand-alt);
            .createSwatch(color-brand-alt-hover, @color-brand-alt-hover);
        }

        /* Partner Colors */
        .partner-brand {
            @import '../../less/palettes/palette-brand-partner';
            .createSwatch(color-brand-primary, @color-brand-primary);
            .createSwatch(color-brand-primary, @color-brand-primary);
            .createSwatch(color-brand-border, @color-brand-border);
            .createSwatch(color-brand-background, @color-brand-background);
            .createSwatch(color-brand-active, @color-brand-active);
            .createSwatch(color-brand-hover, @color-brand-hover);
            .createSwatch(color-brand-alt, @color-brand-alt);
            .createSwatch(color-brand-alt-hover, @color-brand-alt-hover);
        }

        /* Fleet Colors */
        .fleet-brand {
            @import '../../less/palettes/palette-brand-fleet';
            .createSwatch(color-brand-primary, @color-brand-primary);
            .createSwatch(color-brand-primary, @color-brand-primary);
            .createSwatch(color-brand-border, @color-brand-border);
            .createSwatch(color-brand-background, @color-brand-background);
            .createSwatch(color-brand-active, @color-brand-active);
            .createSwatch(color-brand-hover, @color-brand-hover);
            .createSwatch(color-brand-alt, @color-brand-alt);
            .createSwatch(color-brand-alt-hover, @color-brand-alt-hover);
        }

    }

}
