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

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


a {
    @include link;
}


b {
    font-weight: bold;
}


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

$main-max-width: 500px;

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

    background: $white;
    box-shadow: 0 0 5px rgba(0,0,0,.1);

}

@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: 500px) {
        & > section {
            flex: 1 1 auto;
            width: 250px;
        }
    }

    @media (min-width: 120px) {
        & > section {
            flex: 1 1 auto;
            width: 350px;
        }
    }

}

#providers {
    width:150px;
}


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

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

header {
    @include clearfix;

    display: flex;
    align-items: stretch;

    min-height: 55px;

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

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

    a {
        color: $white !important;

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

    .right {
        display: flex;
        flex-flow: column;
        align-items: stretch;
        justify-content: space-around;

        flex: 0 0 auto;
        border-left: 1px solid lighten($header-bg, 15%);

        font-size: 14px;

        text-align: center;

        & > * {
            flex: 0 0 auto;

            & > * {
                display: block;
                padding: 5px 10px;
            }
        }

        #connect-status {
            font-weight: normal;
            font-size: 12px;

            .fa {
                margin-right: 5px;
            }
        }
    }

    h1 {
        flex: 1 1 auto;

        padding: 15px 25px;
    }

}


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

.messages-container {
    padding: 0 15px;

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

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

@mixin message-lvl($cls-level, $bg-color-base) {
    &.#{$cls-level} {
        color: darken($bg-color-base, 15%);
    }
}

.message {

    padding: 5px;
    font-size: 14px;

    color: $gray-dark;

    @include message-lvl('info', $brand-info);
    @include message-lvl('success', $brand-success);
    @include message-lvl('warning', $brand-warning);
    @include message-lvl('error', $brand-danger);
}


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

section {
    & > * + * {
        margin-top: 15px;
    }
}


/* Methods list */

.method-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    & > .method-wrapper {
        flex: 1 100%;
        padding: 2px 0;

        a {
            @include btn;

            border-radius: 0;
            border-left: 5px solid $brand-primary;

            background: $gray-lighter;
            color: $black;
            font-size: 16px;
            text-align: left;

            @include hover-focus {
                background: lighten($brand-primary, 50%);
            }
        }
    }
}

/* Connected accounts list */

.connections-providers-list {

    & > * {

        & + * {
            margin-top: 2px;
        }

        & > .heading {
            @include clearfix;

            width: 100%;
            padding: 10px;

            border-left: 5px solid $brand-primary;
            background: $gray-lighter;

            .connect {
                @include btn;
                @include btn-primary;
                @include btn-sm;

                float: right;
                width: auto;
            }
        }
    }
}

.connections-list {
    border-left: 5px solid $gray-lightest;

    & > * {
        padding: 10px;
        font-size: 14px;

        & + * {
            border-top: 1px dotted $gray-lighter;
        }

        & > .fa {
            margin-right: 5px;
        }

        .delete {
            float: right;
            margin-top: -2px;

            & [type=submit] {
                @include btn;
                @include btn-danger;
                @include btn-sm;
                opacity: .8;
            }
        }
    }

    form {
        display: inline-block;
    }
}

/* E-mail adresses list */

.emailaddress-list {

    .emailaddress {

        border-bottom: 1px dotted $gray;

        .summary {
            @include clearfix;

            height: 45px;

            & > * {
                float: left;
                height: 100%;
                padding: 12px;
            }

            & > .primary, & > .verified-status {
                float: right;
                width: 45px;
                line-height: 100%;
                text-align: center;
                font-size: 20px;
            }

            & > .email {
                padding: 12px;
                font-weight: bold;
            }

            & > .primary {
                color: $brand-primary;
            }

            & > .verified {
                color: $brand-success;
            }

            & > .unverified {
                color: $brand-warning;
            }
        }

    }

}

.actions {
    @include clearfix;

    margin-bottom: 10px;

    & > * {
        float: right;
        margin-right: 10px;
        font-size: 12px;
    }

}


/*********
 * 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;

        padding-left: $input-wrapper-padding;

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

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

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

    &:not(.input-skip) label {
        position: absolute;
        bottom: 100%;
        left: 0;

        pointer-events: none;

        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:not([type=checkbox]) {
        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;
    }

    input[type="checkbox"] {
        vertical-align: sub;
        width: 20px;
        height: 20px;
    }

    @mixin input-special($type, $color: $input-border-color) {
        &.input-#{$type} {
            color: $color;
        }

        &.input-#{$type} input.field {
            padding-bottom: $input-padding - $input-border-width-lg;
            border-width: $input-border-width-lg;
            border-color: $color;
        }
    }

    &:not(.input-skip) {

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

        &.input-focused label {
            color: inherit;
        }
    }

    @include input-special('has-value', $brand-success);
    @include input-special('error', $brand-danger);
    @include input-special('focused', $brand-primary);

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

    .messages {

        & > * {
            padding-top: 5px;
            font-size: 12px;
        }
    }

}

.widget-checkbox {
    display: inline-flex;

    & > input[type="checkbox"] {
        display: none;
    }

    & > button {
        @include transition;
        flex: 0 1 auto;
        display: inline-block;
        padding: 5px 10px;
        background: white;
        color: $gray-light;
    }

    & > button.choice-yes {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    & > button.choice-no {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    & > button.focus {
        background: $brand-primary;
        color: white;
    }
}

[type=submit]:not(.link) {
    @include btn;
    @include btn-success;
    border-radius: 3px;
}

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

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

.form-inline {
    display: flex;
    align-items: center;

    & > .input-wrapper {
        flex: 1 0 auto;
    }

    [type=submit] {
        margin-top: -5px;
        margin-left: 8px;
        font-size: 14px;
    }
}

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

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