// FORM
.form{
    margin: 1.5rem 0 0 0;
    padding: 0;

    .button{
        margin-top: 1.5rem;
    }
}



// LABEL
.label{
    display: block;
    margin: 1.5rem 0 0.75rem 0;
    padding: 0;

    p{
        margin: 0;
    }
    strong{
        color: $error;
    }
}
.label--floating{ // p must be after input
    position: relative;
    margin-top: 0.75rem;
    padding-top: 1.5rem;

    .input{
        margin-top: 0;
    }
    p{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: $grey--medium;
        @include transition;

        // add ellipsis
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .input:placeholder-shown ~ p{
        opacity: 0;
        transform: translate3d(0, 0.25rem, 0);
    }
    .input:focus ~ p{
        color: $grey--dark;
    }
}



// INPUT
.input{
    display: block;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 1.5rem;
    padding: calc(0.75rem - 1px) calc(1.5rem - 1px);
    width: 100%;
    font-family: $font-family--body;
    font-size: 1em;
    font-weight: 400;
    line-height: $font-leading; // from typebase.scss
    text-align: left;
    color: $grey--dark;
    background-color: none;
    border: 1px solid $grey--medium;
    outline: none;
    appearance: none;
    @include border-radius(0);
    @include box-shadow--none;
    @include placeholder {
        color: $grey--medium;
    }

    &:focus{
        border-color: $grey--dark;
    }

    @include desktop{
        @include transition;

        &:hover{
            border-color: $grey--dark;
        }
    }
}
.input--icon{
    padding-left: 2.5rem;
    // background-image: TO SET IN HTML
    background-size: 1.5rem 1.5rem;
    background-position: 0.5rem 0.5rem;
    background-repeat: no-repeat;
}
textarea {
    resize: vertical;
}



// SELECT (for input checkbox & radio)
.select{
    cursor: pointer;
    @include block-selection;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;

    input{
        // hide input
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden; // hides focus too
    }
    input:checked ~ p{
        color: $main;

        // border
        &::before{
            background: rgba($main, 0.1);
            border-color: $main;
            @include box-shadow--extra($main);
        }
        // dot
        &::after{
            transform: scale(1);
            opacity: 1;
        }
    }
    input[type="checkbox"] ~ p{

        // border & dot
        &::before,
        &::after {
            @include border-radius;
        }
    }
    input[type="radio"] ~ p{

        // border & dot
        &::before,
        &::after {
            border-radius: 100%;
        }
    }
    p{
        position: relative;
        margin: 0;

        // border
        &::before{
            content: '';
            position: absolute;
            top: 0.75rem;
            width: 1.5rem;
            height: 1.5rem;
            border: 2px solid $grey--medium;
        }
        // dot
        &::after{
            content: '';
            position: absolute;
            top: 1rem;
            width: 1rem;
            height: 1rem;
            background: $main;
            opacity: 0;
            transform: scale(0.75);
        }
    }

    @include mobile{

        p{
            padding: 0.75rem 0;
            padding-left: 2rem;
        }
        // border
        p::before{
            left: 0;
        }
        // dot
        p::after{
            left: 0.25rem;
        }
    }

    @include desktop{

        p{
            padding: 0.75rem 2rem;
            padding-left: 2.5rem;
            @include border-radius;
            @include transition;
        }
        // border
        p::before{
            left: 0.5rem;
            @include transition;
        }
        // dot
        p::after{
            left: 0.75rem;
            @include transition;
        }

        p:hover{
            background: rgba($main, 0.1);
        }
        // border
        p:hover::before{
            border-color: $main;
        }
    }
}



// BUTTON
.button{
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0.75rem 1.5rem;
    width: auto;
    font-family: $font-family--body;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: $font-leading; // from typebase.scss
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    color: $grey--dark;
    background: $grey--light;
    border: none;
    outline: none;
    appearance: none;
    border-radius: 1.5rem;
    white-space: nowrap; // don't break lines
    @include box-shadow--none;

    &:focus{
        background: darken($grey--light, 10%);
    }

    @include desktop{
        padding: 0.75rem 3rem;
        @include transition;

        &:hover{
            background: darken($grey--light, 10%);
        }
    }
}

// regular button inside section dark
.section--dark .button:not(.button--main):not(.button--secondary):not(.button--white){
    color: white;
    background: lighten($grey--dark, 10%);

    &:focus{
        background: lighten($grey--dark, 20%);
    }

    @include desktop{

        &:hover{
            background: lighten($grey--dark, 20%);
        }
    }
}

// main
.button--main{
    color: white;
    background: $main;

    &:focus{
        background: lighten($main, 10%);
    }

    @include desktop{

        &:hover{
            background: lighten($main, 10%);
        }
    }
}

// secondary
.button--secondary{
    color: white;
    background: $secondary;

    &:focus{
        background: lighten($secondary, 10%);
    }

    @include desktop{

        &:hover{
            background: lighten($secondary, 10%);
        }
    }
}

// white
.button--white{
    color: $main;
    background: white;

    &:focus{
        background: $grey--light;
    }

    @include desktop{

        &:hover{
            background: $grey--light;
        }
    }
}

// full
.button--full{
    display: block;
    width: 100%;
}



// CONTACT FORM 7
.wpcf7-form{
    margin-top: 1.5rem;
}

.wpcf7 .screen-reader-response{
    display: none;
}

// input error messages
.wpcf7-not-valid-tip{
    display: block;
    font-size: 0.875rem;
    line-height: $font-leading;
    color: $error;
}

// form error message
.wpcf7-response-output {
    display: none;
    margin-top: 1.5rem;
    font-size: $font-base-size / 16 * 100%;
    line-height: $font-leading;

    &.wpcf7-validation-errors,
    &.wpcf7-mail-sent-ng{
        color: $error;
    }

    &.wpcf7-mail-sent-ok{
        color: $success;
    }
}

// inputs
.input.wpcf7-not-valid,
input[type=file].wpcf7-not-valid{
    border-color: $error;
    // background-color: rgba($error, 0.1);
}

// loader
@keyframes donut-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.wpcf7-form .ajax-loader{
    display: none;
    margin-left: 0.75rem;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    border: 0.25rem solid $grey--light;
    border-left-color: $main;
    animation: donut-spin 1.2s linear infinite;

    &.is-active{
        display: block;
    }
}



// PARSLEY
.input.parsley-error{
    border-color: $error;
}
.input.parsley-success{
    border-color: $success;
}
.parsley-errors-list{
    // reset list style
    margin: 0;
    padding: 0;
    list-style: none;

    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: $error;
}



// AJAX LOAD MORE
.alm-listing{
    // margin-top: 1.5rem;
}
.alm-btn-wrap{
    // text-align: center;
}
.alm-load-more-btn{
    margin-top: 1.5rem;
}
.alm-load-more-btn.loading{
    pointer-events: none;
    opacity: 0.5;
}
.alm-load-more-btn.done{
    display: none;
}