/*
 * Naming conventions: BEM with prefix "b" (b comes from bem).
 * Using this method can also separate the custom css rules from bootstrap's
 * rules.
 * Form:
 * block--modifier__element

 */
@import url('https://fonts.googleapis.com/css?family=Lato:400,300,300i');
@import url('https://fonts.googleapis.com/css?family=Raleway|Raleway+Dots');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Condensed:300,400,700|Open+Sans:300, 600');
$lato : 'Lato', serif;
$openSans: 'Open Sans', sans-serif;
$raleway: 'Raleway', sans-serif;
$roboto: 'Roboto', sans-serif;

// Overall

.font-smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body {
    width: 100%;
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;

}

.ssp-container {
    flex: 1;
}

.header, .ssp-footer {
    flex: none;
}

a {
    border: 1px solid transparent;
    @extend .font-smooth;
    &:hover, &:active, &:focus {
        color: $link-color-hover;
        text-decoration: none;
    }
}
*:focus {
    outline: none !important;
    border:1px solid $silver !important;
    box-shadow: 0 0 10px $btn-action !important;
}

form {
    margin: 0;
}

.ssp-text-left {
    text-align: left!important;
}


// Headings
// No use of bem, when we want to override every instance of them

$header-font-weight: 300;
$headers_margin_top: 50px;
.ssp-logo {
    margin-top: $headers_margin_top;
    a {
        display: inline-block;
        padding: 10px;
        &:hover {
            text-decoration: none;
        }
    }
    img {
       width: $logo-width;
    }
}

.headers-text {
    font-weight: $header-font-weight;
    font-family: $lato;
    margin-top: $headers_margin_top;
}

h1 {
    @extend .headers-text;
    font-size: 36px;
    text-transform: none!important;
    margin: 0;
    &.disco {
        color: $alt-text;
        font-family: $openSans;
    }
}


h1 small {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #ccc;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    margin-top: 10px;
}

h2 {
    @extend .headers-text;
    font-size: 18px;
    text-transform: none!important;
}

h3 {
    @extend .headers-text;
    font-size: 16px;
    &.disco {
        @extend .font-smooth;
        font-family: $raleway;
        color: $light-gray;
        margin-top: 20px;
    }
}

h4 {
    @extend .headers-text;
    font-size: 14px;
}

h5, h6 {
    @extend .headers-text;
}

h2.subtle {
    small {
        color: #ccc;
        display: block;
        font-size: 14px;
        margin-top: 10px;
    }
}

// Bottom

.ssp-footer {
    @extend .font-smooth;
    background: $footer-bg;
    color: $footer-text;
    font-weight: 300;
    &--container {
        padding: 16px;
    }
}

.ssp-lang-container {
    display: inline-block;
    // position: absolute;
    // bottom: -10px;
    // right: 24px;
}


// Buttons

$margin-btn: 20px;
$btn-distance: 10px;
$btn-img-height: 36px;
$btn-img-copy-height: 20px;
.ssp-btn {
    @extend .font-smooth;
    border-radius: 2px;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 15px;
    line-height: 40px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
    border: 0 none;
    margin-bottom: $margin-btn;
    white-space: normal;
    color: $scorpion;
    font-family: $roboto;
    &:hover, &:focus, &:active {
        color: $btn-action;
        box-shadow: 0 6px 50px rgba(0,0,0,0.05);
    }
    .caret {
        margin-left: 12px;
    }
    @at-root &__lg {
        width: 100%;
        margin: 0;
    }
    @at-root &__action {
        &:focus, &:active, &:hover {
            color: $btn-action;
        }
    }
    @at-root &__secondary {
        &:focus, &:active, &:hover {
            color: $mouse;
        }
    }
    @at-root &__warning {
        color: $btn-warning;
    }
    @at-root &__lg {
        img {
            height: $btn-img-height;
            margin-right: $btn-distance;
            &.round {
                border-radius: $btn-img-height/2;
            }
        }
    }
    @at-root &__footer {
        background-color: transparent;
        color: $btn-footer;
        border-color: transparent;
        &:focus, &:active, &:hover {
            color: $link-color-hover;
            border-color: $silver;
        }
    }
    &--round-icon {
        padding: 0;
        display: inline-block;
        margin-top: $btn-distance/2;
        margin-bottom: $btn-distance/2;
        border-radius: $btn-img-height/2;
        &:not(:last-child) {
            margin-right: $btn-distance*2;
        }
        img {
            height: $btn-img-height;
            border-radius: $btn-img-height/2;
        }
    }
    &--horizontal-icon {
        padding: 6px 34px;
        img {
            height: $btn-img-height;
        }
    }
    &--copy {
        img {
            height: $btn-img-copy-height;
        }
    }
}

.ssp-btns-container {
    text-align: center;
    @at-root &--btn__right.ssp-btn {
        margin-left:  $btn-distance;
    }
    @at-root &--btn__left.ssp-btn {
        margin-right: $btn-distance;
    }
}


.ssp-dropdown__two_cols {
    width: 320px;
    padding: 6px;
    @at-root &--item {
        width: 50%;
        float: left;
        display: inline-block;
        height: 30px;
    }
}

.ssp-btn__show-more {
    color: $text-color;
    &:hover {
        color: $jacksons-purple;
    }

}

// Content

.ssp-content-group {
    margin-bottom: 18px;
    margin-top: 18px;
    &__provider-list {
        overflow: auto;
        &--edugain {
            padding: 6px 6px 6px 42px;
            height: 400px;
            a {
                display: block;
                position: relative;
                padding: 4px 12px;
                &:hover {
                    background-color: $alabaster;
                }
            }
        }
        &--other {
            a {
                display: inline-block;
                position: relative;
                padding: 0;
            }
        }
        &--local {
            padding: 2px 6px 2px 54px;
            a {
                display: inline-block;
                position: relative;
            }
        }
    }
}

.ssp-attrs--container {
    padding: 16px;
    margin-bottom: 32px;
}

.ssp-table {
    margin-bottom: 0;
    font-size: 13px;
    @at-root &--tr__odd {
        background-color: lighten($alabaster, 1%);
    }
    @at-root &--attrname {
        width: 35%;
        overflow: hidden;
        float: left;
        word-break: break-word;
        text-align: right;
        padding-right: 20px;
        font-weight: bold;
    }
    @at-root &--attrvalue {
        overflow: hidden;
        word-break: break-word;
        @at-root &--list--item {
            border-bottom: 1px solid $gray-lighter;
            padding: 6px 0;
        }
    }
}

.ssp-or {
    @extend .font-smooth;
    font-family: $raleway;
    font-size: 16px;
    color: $manatee;
    margin-top: 40px;
    margin-bottom: 40px;
}

body .ssp-modal-body {
    padding: 30px;
}

.ssp-error-code {
    padding: 18px;
    white-space: pre-line;
}

.form-control ~span {
    color: $state-danger-text;
    font-size: 13px;
    display: none;
}

.error-mandatory input,
.error-mail input {
    border-color: $alert-danger-text;
}

.error-mandatory span.mandatory {
    display: block;
}

.error-mail span.mail {
    display: block;
}

input.form-control[type="radio"], input.form-control[type="checkbox"] {
    margin: 4px 8px;
    width: auto;
    display: inline-block;
    height: auto;
    border: 0 none;
}

.ssp-form--hint {
    color: #989393;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

 .modal.fade .modal-dialog {
// When fading in the modal, animate it to slide down
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); // IE9 only
          transform: translate(0, 0);
}
 .modal.fade.in .modal-dialog {
  -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
 }

 .container {
    // max-width: 375px;
 }

 .ssp-link-forgot {
    @extend .font-smooth;
    &.pull-right {
        float: right;
    }
    &.pull-left {
        float: left;
    }
 }

 .ssp-btn__login {
    margin-top: 18px;
 }

 .ssp-container-small {
    max-width: 280px;
    margin: 0 auto;
 }

 .ssp-signup {
    @extend .font-smooth;
    padding: 6px;
    color: $text-color;
    font-size: 15px;
    a {
        color: $link-color;
        &:hover {
            color: $link-color-hover;
        }
    }


 }