@import "include/normalize";
@import "themes/colours-2016";
@import "include/fonts";

$header-height: 80px;
$margin-side:   10px;
$margin-top:    15px;
$image-width:   70px;

html, body {
    height:           100%;
    width:            100%;
    line-height:      1.2*$line-height;
    background-color: lighten($glaciergray, 20%);
    font:             $font-size $fonts-list;
    color:            $black;
}

body {
    display:          flex;
    flex-direction:   column;
}

@import "include/header";

@media screen and (max-width: 500px) {
    form#login {
        p#email::before,
        p#password::before {
            left:  -8vw !important;
            width: 8vw  !important;
        }
    }
}

main {
    flex:              0 0 auto;
    margin-top:        5%;
    display:           flex;
    width:             100%;
    flex-direction:    row;
    justify-content:   center;

    fieldset {
        margin:           0;
        padding:          0;
        outline:          0;
        border:           0;
        min-width:        320px - 4*$font-size;  // small iPhone
        max-width:        50%;
        background-color: $white;
        //padding-top:      $font-size;
        padding-top:      $font-size;
        padding-bottom:   $font-size;
        padding-right:    6*$font-size;
        padding-left:     6*$font-size;
        border-radius:    $line-height;
        border:           1px solid lighten($glaciergray, 15%);

        legend {
            position:         relative;
            text-align:       center;
            margin-top:       0;
            padding-left:     2*$font-size;
            padding-right:    2*$font-size;
            padding-top:      0.2*$line-height;
            padding-bottom:   0.2*$line-height;
            font-size:        2*$font-size;
            border:           1px solid lighten($glaciergray, 18%);
            border-radius:    10px;
            background-color: $white;
            font-weight:      600;
        }
    }

}

form#login {
    #email label,
    #password label {
        display:        none;
    }

    p#email,
    p#password,
    p#remember,
    p#submit {
        position:         relative;
    }

    p#email:before,
    p#password:before {
        position:         absolute;
        left:             -3*$font-size;
        color:            $black;
        display:          block;
        height:           2*$line-height;
        line-height:      2*$line-height;
        text-align:       center;
        width:            $font-size;
    }

    p#email::before {
        content:          '  ';
        white-space:      pre;
        background:       url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00MzAuNzY5IDMxMi42NTNsLTQ4LjY1OC0xMy45MDJDNDI3LjgzMyAyNTEuODA2IDQzMiAxOTcuNjA1IDQzMiAxNzYgNDMyIDc4Ljg0NSAzNTMuMjYyIDAgMjU2IDAgMTU4Ljg1OSAwIDgwIDc4LjcyNCA4MCAxNzZjMCAyMS42MDkgNC4xNjcgNzUuODA2IDQ5Ljg4OSAxMjIuNzUxbC00OC42NTggMTMuOTAyQzE5LjQ5IDMzMC4yOTQgMCAzODYuNDQyIDAgNDIwLjM0NFY0NDhjMCAzNS4yOSAyOC43MSA2NCA2NCA2NGgzODRjMzUuMjkgMCA2NC0yOC43MSA2NC02NHYtMjcuNjU2YzAtMzMuMTk4LTE4Ljk4MS04OS45MDUtODEuMjMxLTEwNy42OTF6TTI1NiAzMmM3OS41MjkgMCAxNDQgNjQuNDcxIDE0NCAxNDRzLTY0LjQ3MSAxNDQtMTQ0IDE0NC0xNDQtNjQuNDcxLTE0NC0xNDRTMTc2LjQ3MSAzMiAyNTYgMzJ6bTIyNCA0MTZjMCAxNy42NzMtMTQuMzI3IDMyLTMyIDMySDY0Yy0xNy42NzMgMC0zMi0xNC4zMjctMzItMzJ2LTI3LjY1NmMwLTM1LjcxOCAyMy42NzgtNjcuMTA5IDU4LjAyMi03Ni45MjJsNjkuODYyLTE5Ljk2MUMxNzYuOTY5IDMzNC42MTMgMjEwLjEwOSAzNTIgMjU2IDM1MmM0NS44OTcgMCA3OS4wMzgtMTcuMzkyIDk2LjExNi0yOC41MzhsNjkuODYyIDE5Ljk2MUM0NTYuMzIyIDM1My4yMzUgNDgwIDM4NC42MjYgNDgwIDQyMC4zNDRWNDQ4eiI+PC9wYXRoPjwvc3ZnPgo=") $white no-repeat;
    }

    p#password::before {
        content:          '  ';
        white-space:      pre;
        background:       url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00MDAgMjI0aC0xNnYtNjIuNUMzODQgNzMuMSAzMTIuOS4zIDIyNC41IDAgMTM2LS4zIDY0IDcxLjYgNjQgMTYwdjY0SDQ4Yy0yNi41IDAtNDggMjEuNS00OCA0OHYxOTJjMCAyNi41IDIxLjUgNDggNDggNDhoMzUyYzI2LjUgMCA0OC0yMS41IDQ4LTQ4VjI3MmMwLTI2LjUtMjEuNS00OC00OC00OHpNOTYgMTYwYzAtNzAuNiA1Ny40LTEyOCAxMjgtMTI4czEyOCA1Ny40IDEyOCAxMjh2NjRIOTZ2LTY0em0zMDQgMzIwSDQ4Yy04LjggMC0xNi03LjItMTYtMTZWMjcyYzAtOC44IDcuMi0xNiAxNi0xNmgzNTJjOC44IDAgMTYgNy4yIDE2IDE2djE5MmMwIDguOC03LjIgMTYtMTYgMTZ6Ij48L3BhdGg+PC9zdmc+Cg==") $white no-repeat;
    }

    #email input, #password input, #submit input {
        height:             2*$line-height;
    }

    @keyframes border-pulsate {
        0%   { border-color: lighten($tangerine, 20%); }
        20%  { border-color: $tangerine; }
        40%  { border-color: darken($tangerine, 20%); }
        80%  { border-color: $tangerine; }
        90%  { border-color: lighten($tangerine, 10%); }
        100% { border-color: lighten($tangerine, 20%); }
    }

    input[type="text"], input[type="password"] {
        width                : 100%;
        padding              : 0;
        border               : none;
        outline              : 0;
        font-family          : $fonts-list;
        font-size            : $font-size;
        line-height          : $line-height;
        -webkit-appearance   : none;
        background-color     : lighten($glaciergray, 10%);
        border               : 2px solid lighten($glaciergray, 10%);
        border-radius        : 0px $font-size/2 $font-size/2 0px;
        color                : $black;
        padding-left         : $font-size;
        box-sizing           : border-box;

        &:focus {
            background-color : lighten($glaciergray, 18%);
            border           : 2px solid lighten($tangerine, 12%);
            animation        : border-pulsate 4s infinite;
        }
    }

    p#submit {
    }

    @keyframes color-pulsate {
        0%   { color: lighten($custard, 10%); font-size: 1.1*$font-size;}
        20%  { color: lighten($custard, 20%); font-size: 1.11*$font-size;}
        40%  { color: lighten($custard, 50%); font-size: 1.12*$font-size; }
        90%  { color: lighten($custard, 10%); font-size: $font-size; }
        100% { color: lighten($custard, 5%);  font-size: 1.05*$font-size;}
    }


    input[type="submit"] {
        width:              100%;
        border:             none;
        padding:            0;
        -webkit-appearance: none;
        border-radius:      $font-size/3;
        background-color:   $tangerine;
        color:              $white;
        font-weight:        bold;
        -webkit-appearance: none;
        margin-bottom:      $line-height/4;
        text-transform:     uppercase;
        padding-left:       $font-size;
        box-sizing:         border-box;

        &:focus {
            color:             $custard;
            animation        : color-pulsate 4s infinite;
        }
    }

    input[type="submit"]:hover {
        background-color:   $treetop;
    }

    p#remember {
        text-align:         right;
        margin-bottom:      $line-height;
    }

    input[type="checkbox"] + label {
        color:              $titanium;
        font-style:         normal;
        display:            inline-block;
        margin-left:        $font-size/3;
    }

    input[type="checkbox"]:checked + label {
        color:              $treetop;
        background-color:   $custard;
        font-style:         normal;
        margin-left:        $font-size/3;
    }
}

.forgot-password {
    text-align: center;
    font-style: italic;

    a {
        color:           $scubablue;
        text-decoration: none;
        font-style:      normal;
        font-weight:     700;
        margin-left:     0.5*$font-size;

        &:hover {
            text-decoration: underline;
        }
    }
}

.signup {
    text-align: center;
    font-style: italic;

    &:after {
        padding-left:  0.4*$font-size;
        content:       '  ';
        white-space:      pre;
        background:    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xOTAuNSA2Ni45bDIyLjItMjIuMmM5LjQtOS40IDI0LjYtOS40IDMzLjkgMEw0NDEgMjM5YzkuNCA5LjQgOS40IDI0LjYgMCAzMy45TDI0Ni42IDQ2Ny4zYy05LjQgOS40LTI0LjYgOS40LTMzLjkgMGwtMjIuMi0yMi4yYy05LjUtOS41LTkuMy0yNSAuNC0zNC4zTDMxMS40IDI5NkgyNGMtMTMuMyAwLTI0LTEwLjctMjQtMjR2LTMyYzAtMTMuMyAxMC43LTI0IDI0LTI0aDI4Ny40TDE5MC45IDEwMS4yYy05LjgtOS4zLTEwLTI0LjgtLjQtMzQuM3oiPjwvcGF0aD48L3N2Zz4K") $scubablue no-repeat;
    }

    a {
        color:           $scubablue;
        text-decoration: none;
        font-style:      normal;
        font-weight:     700;
        margin-left:     0.5*$font-size;

        &:hover {
            text-decoration: underline;
        }
    }
}
