body {
    font-family: Roboto, Verdana;
    font-family: $font-family-base;
    line-height: 1.4;
    background: $gray-lightest;
    color: $gray;

    @media (min-width: 576px) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


a {
    @include link;
}


b {
    font-weight: bold;
}


/********************
 * Layout structure *
 ********************/

$main-max-width: 700px;

$divider-size: 2px;

.wrapper {
    max-width: $main-max-width;
    margin: 0 auto;

    background: $white;
    box-shadow: 0 0 10px $gray-lighter;

}

@media (min-height: 400px) and (min-width: 576px) {
    html, body {
        height: 100%;
    }
}

@media (min-height: 500px) and (min-width: 576px) {
    .wrapper {
        position: relative;
        top: -5%;
    }
}

.content-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;

    /* Blocks */

    & > section {
        flex: 1 100%;
        padding: 15px;
    }

    @media (min-width: 576px) {
        & > section {
            flex: 1 1 auto;
            width: 350px - $divider-size / 2;
        }
    }

    /* Divider */

    & > .divider {
        display: none;

        &::before {
            display: block;
            content: " ";
            background: $gray-lighter;

            height: $divider-size;
            width: $divider-size;
        }

        @media (max-width: 575px) {
            & {
                flex: 100%;
                padding: 0 15px;
            }

            &::before { width: 100%; }
        }

        @media (min-width: 576px) {
            & {
                align-self: stretch;
                padding: 15px 0;
            }

            &::before { height: 100%; }
        }
    }

    & > section + .divider {
        display: block;
    }
}


/**********
 * Header *
 **********/

$header-bg: darken($red, 10%);
$header-history-icon-size: 20px;

header {
    @include clearfix;

    display: flex;
    align-items: stretch;

    min-height: 60px;

    background: $header-bg;
    color: $white;

    font-size: 20px;
    font-weight: bold;

    button {
        width: 60px;
        cursor: pointer;

        background: transparent;

        @include hover-focus {
            background: lighten($header-bg, 5%);
        }

        img {
            height: $header-history-icon-size;
            width: auto;
            vertical-align: bottom;
        }
    }

    h1 {
        padding: 15px 35px 15px 15px;
        line-height: 30px;
    }

}


/************
 * Messages *
 ************/

.messages-container {
    padding: 0 15px;

    &::after {
        display: block;
        content: "";
        background-color: $gray-lighter;
        height: 2px;
    }
}

.messages-list {
    padding: 15px 0;
}

.message {
    & + .message {
        margin-top: 10px;
    }

    &.warning   {   color: darken($orange, 15%);    }
    &.error     {   color: $red;                    }
}


/***********
 * Content *
 ***********/

section {
    p {
        margin-bottom: 15px;
    }
}


/* Methods list */

$space-between: 15px;

.method-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: - $space-between / 2;
}

.method-wrapper {
    flex: 1 50%;
    padding: $space-between / 2;

    a {
        @include btn;
        @include btn-primary-hov;
        display: block;
    }
}

/* Connected accounts list */

.provider-list {

    & > li {
        height: 40px;
        padding: 10px;

        & > .heading > * {
            float: left;
        }
    }
    form {
        display: inline-block;
    }
}



/*********
 * Forms *
 *********/

$input-space-after:         10px;
$input-wrapper-padding:     0;


$input-border-color:        rgba(0,0,0,0.12);
$input-border-width:        1px;
$input-border-width-lg:     2px;
$input-padding:             2px;
$input-font-size:           16px;
$input-height:              30px;

$label-small-scale: 0.75;

$input-height-inner: $input-height - 2 * $input-padding;

$label-height: $input-height-inner;
$label-small-top: $label-height * (1 - $label-small-scale);
$label-top: $label-height + $input-wrapper-padding + $input-padding;

.input-wrapper {
    @include clearfix;

    position: relative;
    display: block;
    margin: ($label-small-scale * $label-height) 0;
    padding: $input-wrapper-padding;

    label {
        @include ellipsis;

        position: absolute;
        bottom: 100%;
        left: 0;

        padding-left: $input-wrapper-padding;

        width: 100%;
        max-width: 100%;

        height: $label-height;
        line-height: $label-height;

        pointer-events: none;

        color: rgba(0,0,0,0.38);
        font-size: $input-font-size;

        transform: translate3d(0,$label-height + $input-padding,0) scale(1);
        transition: transform .4s cubic-bezier(.25,.8,.25,1);
        transform-origin: left top;
    }

    input.field {
        height: $input-height;
        width: 100%;

        padding: $input-padding $input-padding ($input-padding - $input-border-width);

        background-color: $white;
        line-height: $input-height-inner;

        border-bottom: $input-border-width solid $input-border-color;

        font-size: $input-font-size;
    }

    @mixin input-special($type, $color: $input-border-color) {
        &.input-#{$type} input.field {
            padding-bottom: $input-padding - $input-border-width-lg;
            border-width: $input-border-width-lg;
            border-color: $color;
        }
    }

    &.input-focused label,
    &.input-has-value label {
        transform: translate3d(0,$label-small-top,0) scale($label-small-scale);
    }

    @include input-special('has-value', $green);
    @include input-special('error', $red);
    @include input-special('focused', $blue);

    .infos-spacer {
        float: right;
        min-height: $input-space-after;
        min-width: 1px;
    }

}

[type=submit]:not(.link) {
    @include btn;
    @include btn-success-hov;
}

[type=submit].link {
    @include link;
    background: transparent;
    padding: 0;

    @include hover-focus {
        cursor: pointer;
    }
}

.btn {
    @include btn;
    display: block;
}

.btn-primary-hov {
    @include btn-primary-hov;
}