/*
    the default layout's header
*/
.header {
    // background-color: $white-smoke;
    // border-bottom: 1px solid $gainsboro;

    padding: 1em 0 0;

    img {
        margin-bottom: 1em;
        max-height: 2.5em;
    }

    .progress {
        height: 10px;
        margin-bottom: 1em;
        padding: 0;
    }
}

/*
    get rid of the jump that is introduced when switching from a site with
    scrollbar to a site without (or vice versa)

    (100vw includes the scrollbar, 100% does not)
*/
html {
    @media not print {
        margin-left: calc(100vw - 100%);
    }
}

/*
    footer pinned to the bottom
*/
$footer-height: 185px;

html,
body {
    height: 100%;
}

#inner-body {
    margin: 0 auto -$footer-height;

    @media not print {
      min-height: 100%;
    }
}

.footer,
.push {
    height: $footer-height;
}

/*
    footer content
*/
.footer > div {
    background-color: $white-smoke;
    padding: 1em 0;

    h2 {
        font-size: .8rem;
        font-weight: bold;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            font-size: .8rem;
            line-height: 1.5;
        }

        .empty {
            height: .875rem;
        }
    }
}

/*
    top assistant messages
*/
.message {
    font-size: 1.3em;
    font-weight: bold;
    padding: .5em 0 1em;
}

.panel.warning {
    background-color: $yellow-light;
    border-color: $yellow;
}

/*
    color picker
*/
.colorPicker-picker {
    cursor: pointer;
    height: 48px;
    line-height: 48px;
    margin-bottom: 2em;
    width: 48px;
}

.colorPicker-palette {
    background-color: $white;
    border: 1px solid $gainsboro;
    padding: 10px 10px 0;
    position: absolute;
    width: 214px;
    z-index: 9999;
}

.colorPicker_hexWrap {
    float: left;
    width: 100%;

    label {
        display: none;
    }

    input {
        border: 1px solid $input-border-color;
        box-shadow: $input-box-shadow;
        margin-top: 1em;
    }
}

.colorPicker-swatch {
    cursor: pointer;
    float: left;
    height: 32px;
    width: 32px;
}

/*
    color preview
*/
.color-preview {
    height: 48px;
    width: 48px;
}

/*
    awesomeplete
*/
[hidden] { display: none; }

.visually-hidden {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

.awesomplete {
    position: relative;

    > input {
        display: block;
    }

    > ul {
        background: $white;
        border: 1px solid rgba(0, 0, 0, .3);
        box-shadow: .05em .2em .6em rgba(0, 0, 0, .2);
        box-sizing: border-box;
        left: 0;
        list-style: none;
        margin: -8px 0 0;
        min-width: 100%;
        padding: 0;
        position: absolute;
        text-shadow: none;
        z-index: 1;

        > li {
            color: $body-font-color;
            cursor: pointer;
            padding: .2em .5em;
            position: relative;
        }

        > li:hover,
        > li[aria-selected="true"] {
            background-color: $primary-color;
            color: $white;

            * {
                color: $white;
            }
        }
    }

    > ul[hidden],
    > ul:empty {
        display: none;
    }

    > ul:before {
        background: $white;
        border: inherit;
        border-bottom: 0;
        border-right: 0;
        content: '';
        height: 0;
        left: 1em;
        padding: .4em;
        position: absolute;
        top: -.43em;
        transform: rotate(45deg);
        width: 0;
    }

    mark {
        background: none;
        font-weight: bold;
    }
}
