@import '../partials/layout'; // responsive grid and media queries

// color palette - these colors will be the color swatches of the Colors section

$color-1: #5f8ee4; // Cornflower Blue - Action color
$color-2: #19191a; // Dark Blue
$color-3: #e4655f; // Red
$color-4: #e6e6e6; // light grey
$color-5: #ffffff; // white
$color-6: #A846FE; // purple
$color-7: #484848; // grey


//colors.  Mostly for styleguide, you should not normally use these in the DOM
.bg-purple {
    background-color: $purple;
}

.bg-purple1 {
    background-color: $purple1;
}

.bg-purple2 {
    background-color: $purple2;
}

.bg-purple3 {
    background-color: $purple3;
}

.bg-gray {
    background-color: $gray;
}

.bg-gray1 {
    background-color: $gray1;
}

.bg-gray2 {
    background-color: $gray2;
}

.bg-gray3 {
    background-color: $gray3;
}

.bg-gray4 {
    background-color: $gray4;
}

.bg-white {
    background-color: $white;
}

.bg-orange {
    background-color: $orange;
}

.bg-orange1 {
    background-color: $orange1;
}

.bg-orange2 {
    background-color: $orange2;
}

.bg-black {
    background-color: $black;
}

.bg-yellow {
    background-color: $yellow;
}

.bg-blue {
    background-color: $blue;
}


// additional colors

$success: #6fce72; // green
$alert: $color-3;  // red

// fonts

$primary-font: 'Merriweather', serif;
$secondary-font: 'Open Sans', sans-serif;

/* --------------------------------

xBackground

-------------------------------- */

body {
    /* this is the page background */
    background-color: $color-5;
}

.assembl_styleguide {

    /* --------------------------------

    xPatterns

    -------------------------------- */

    .cd-box {
        /* this is the container of various design elements - i.e. the 2 logo of the branding section */
        border: 1px solid $color-4;
        border-radius: 3px;
        background: $color-5;
        box-shadow: 0 1px 1px rgba(#000, .05);
        padding: 6px;
    }

    .cd-box-radius {

    }

    /* --------------------------------

    xNavigation

    -------------------------------- */

    header {
        background-color: $color-5;
    }

    .cd-logo {
        /* logo box style */
        //background-color: $color-1;
        width: 120px;

        @include MQ(M) {
            width: 130px;
        }
    }

    .cd-main-nav {
        /* main navigation background color - full screen on small devices */
        background: $color-2;

        li a {
            color: $color-5;
            border-color: lighten($color-2, 5%);
            text-decoration: none;
        }

        @include MQ(M) {
            li a {
                color: lighten($color-2, 40%);

                &.selected {
                    color: $color-7;
                    box-shadow: 0 2px 0 $color-6;
                }

                .no-touch &:hover {
                    color: $color-7;
                }
            }
        }
    }

    .cd-nav-trigger span {
        /* hamburger menu */
        background-color: $color-5;

        &::before,
        &::after {
            /* upper and lower lines */
            background-color: $color-5;
        }
    }

    .nav-is-visible .cd-nav-trigger span {
        /* hide line in the center on mobile when nav is visible */
        background-color: rgba($color-5, 0);

        &::before, &::after {
            /* preserve visibility of upper and lower lines - close icon */
            background-color: rgba($color-5, 1);
        }
    }

    .cd-download {
        /* download button top-right visible on big devices */
        //background-color: lighten($color-2, 10%);

        .no-touch &:hover {
            background-color: lighten($color-2, 15%);
        }

        span {
            /* tooltip */
            background: $color-1;
            color: $color-5;

            &::before {
                /* right arrow color */
                border-color: $color-1;
            }
        }
    }

    /* --------------------------------

    xPage title

    -------------------------------- */

    main > h1 {
        color: $color-2;

        @include MQ(L) {
            /* title goes into the header on big devices */
            color: $color-5;
        }
    }

    /* --------------------------------

    xTypography

    -------------------------------- */

    h1, h2 {
        font-family: $secondary-font;
        color: $color-2;
    }

    h1 {
        font-size: 2.4rem;
        font-weight: 300;
        line-height: 1.2;
        margin: 0 0 .4em;

        @include MQ(S) {
            font-size: 3.2rem;
        }

        @include MQ(M) {
            font-size: 4rem;
        }
    }

    h2 {
        font-weight: bold;
        text-transform: uppercase;
        margin: 1em 0;

        @include MQ(S) {
            font-size: 1.8rem;
            margin: 1em 0 1.4em;
        }
    }

    section > h2::before {
        /* number before each section title */
        color: darken($color-4, 15%);
    }

    p {
        font-size: 1.4rem;
        line-height: 1.4;
        color: lighten($color-2, 25%);

        a {
            color: $color-1;
            text-decoration: underline;
        }

        @include MQ(S) {
            font-size: 1.6rem;
            line-height: 1.6;
        }
    }

    /* --------------------------------

    xButtons

    -------------------------------- */

    .cd-buttons .cd-box:nth-of-type(2) span {
        /* CSS class name color */
        color: $color-1;
    }

    /* --------------------------------

    xIcons

    -------------------------------- */

    .cd-icons li {
        /* icons size */
        //width: 32px;
        height: 32px;

        span {
            font-size: 12px;
        }
    }

    /* --------------------------------

    xForm

    -------------------------------- */

    input[type=text], select {
        border: 1px solid $color-4;
        border-radius: .25em;
        background: $color-5;

        &:focus {
            outline: none;
        }
    }

    input[type=text] {
        padding: .6em 1em;
        box-shadow: inset 1px 1px rgba(#000, .03);

        &.success {
            border-color: $success;
            box-shadow: 0 0 6px rgba($success, .2);
        }

        &.alert {
            border-color: $alert;
            box-shadow: 0 0 6px rgba($alert, .2);
        }

        &:focus {
            border-color: $color-1;
            box-shadow: 0 0 6px rgba($color-1, .2);
        }
    }

    input[type=radio],
    input[type=checkbox] {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
    }

    .radio-label,
    .checkbox-label {
        padding-left: 24px;
        @include user-select(none);

        &::before,
        &::after {
            /* custom radio and check boxes */
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            position: absolute;
            top: 50%;
            @include transform(translateY(-50%));
        }

        &::before {
            left: 0;
            border: 1px solid $color-4;
            box-shadow: inset 1px 1px rgba(#000, .03);
        }

        &::after {
            left: 3px;
            background: url('../assets/form/icon-check.svg') no-repeat center center;
            display: none;
        }
    }

    .radio-label::before {
        border-radius: 50%;
    }

    .checkbox-label::before {
        border-radius: 3px;
    }

    input[type=radio]:checked + label::before,
    input[type=checkbox]:checked + label::before {
        background-color: $color-2;
        border: none;
        box-shadow: none;
    }

    input[type=radio]:checked + label::after,
    input[type=checkbox]:checked + label::after {
        display: block;
    }

    .cd-select::after {
        /* switcher arrow for select element */
        content: '';
        position: absolute;
        z-index: 1;
        right: 14px;
        top: 50%;
        @include transform(translateY(-50%));
        display: block;
        width: 16px;
        height: 16px;
        background: url('../assets/form/icon-select.svg') no-repeat center center;
        pointer-events: none;
    }

    select {
        position: relative;
        padding: .6em 2em .6em 1em;
        cursor: pointer;
        @include appearance(none);
    }

    @import '../partials/basic-style';
}


