/*
 * This file describe form fields.
 * It includes input, textarea, select and buttons.
 *
 * File architecture:
 *
 * - EDITION FIELDS
 * - BUTTONS
 * - OTHERS FORM TAGS (label, fieldset)
 * - ADDITIONAL FORMATTING CLASSES
 *
 */

/*
 * This mixin give to a field general rules
 * (margin, padding, font-size, line-height and so on.)
 * depending to the size.
 */
 @mixin form-field-sizing( $size ) {
    
    border:0;
    margin:0;

    vertical-align: top;
    border-radius: $border-radius;
    font-family: $form-field-font-family;

    @if( $size == small ){

        font-size: $font-size-em /$size-ratio +em;
        
        @include font-size(1/2);
        @include line-height(3/4);

        @include padding-top(0);
        @include padding-bottom(0);
        @include padding-left(0.5);
        @include padding-right(0.5);
        @include margin-top(0.125);
        @include margin-bottom(0.125);
    }
    @else if( $size == normal ){

        @include font-size(0.5);
        @include line-height(1);

        @include padding-left(0.5);
        @include padding-right(0.5);
        @include margin-top(0);
        @include margin-bottom(0);
    
    }
    @else if( $size == medium ){

        @include font-size(1.5);
        @include line-height(1.5);
        
        @include padding-right(0.75);
        @include padding-left(0.75);
        @include margin-top( 1/4 );
        @include margin-bottom( 1/4 );
    }
    @else if( $size == big ){

        @include font-size(2);
        @include line-height(2);

        @include padding-top(0);
        @include padding-bottom(0);

        @include padding-left(1);
        @include padding-right(1);
        
        margin-top: 0;
        margin-bottom: 0;
    }

    
    @each $color-name in $color-names-list {

        $i: index( $color-names-list, $color-name ) ;
        $color: nth( $color-list,$i);
        
        &.#{$color-name}{
            
            @include border-shadow( $color, 1px, 1px, 1px, 1px );

        }
    }
}

/* EDITION FIELDS */

/*
 * Give border (through box-shadow) & sizing for each field
 * that looks like <input type='text'/>.
 * The list is exhaustive.
 */
input:not([type]),
input[type=text],input[type=date],
input[type=datetime-local], input[type=email],
input[type=month], input[type=number],
input[type=password], input[type=search],
input[type=tel], input[type=time],
input[type=url], input[type=week],
textarea, select
{

    box-shadow: $field-box-shadow;
    color:$field-color;

    @include form-field-sizing(normal);

    &.small{
        @include form-field-sizing(small);
    }
    &.medium{
        @include form-field-sizing(medium);
    }
    &.big{
        @include form-field-sizing(big);
    }
    

    @if( $hover-animation ){
        transition: box-shadow $hover-animation-duration;
    }

    &:hover{
        box-shadow: $field-box-shadow-hover;
    }

    &:focus{
        box-shadow: $field-box-shadow-focus;
    }
}

/*
 * Special classes for <input type='text'/> like inputs.
 */ 
 input:not([type]),
 input[type=text],input[type=date],
 input[type=datetime-local], input[type=email],
 input[type=month], input[type=number],
 input[type=password], input[type=search],
 input[type=tel], input[type=time],
 input[type=url], input[type=week]{

    &.in-text{

        box-shadow: 0 1px 0 #ccc;
        color: $grey;
        border-radius: 0;
        background: transparent;
        font-family: inherit;
        line-height: inherit;
    }

    &.rounded{
        border-radius: 100px;
    }
}

textarea{
    width: 100%;
    max-width: 100%;
    min-height: $line-height+rem;
    box-sizing: border-box;
}

select {

    @include height(1);
    option{
        @include font-size(1);
    }

    &.small{

        @include height(3/4);
        option{
            @include font-size(3/4);
        }
    }

    &.medium{

        @include height(1.5);
        option{
            @include font-size(1.5);
        }
    }

    &.big{
        
        @include height(2);
        option{
            @include font-size(2);
        }
    }
}

/* BUTTONS */

button, input[type=button] {

    @include form-field-sizing(normal);
    
    &.small{

        @include form-field-sizing(small);
    }

    &.medium{

        @include form-field-sizing(medium);
    }

    &.big{

        @include form-field-sizing(big);
    }

    white-space: nowrap;

    $border-color: getBorderColor(#eee);

    //box-shadow: 0 -1px $border-color inset, 0 1px $border-color inset, -1px 0 $border-color inset,1px 0 $border-color inset;
    background:#eee;
    border:0;
    vertical-align:top; /* For small button, a 2px margin-top appear without any reason. */

    cursor: pointer;

    &.invisible{
        background-color: transparent;
        box-shadow: none;
        color: inherit;
        @include padding-left(1/4);
        @include padding-right(1/4);

        &:hover{
            
            background-color: transparent;
            box-shadow: none;
        }
    }

    @if($hover-animation){
        transition: background-color $hover-animation-duration;
    }
    
    &:hover{
        background:lighten(#eee,10%);
    }

    @each $color-name in $color-names-list {

        $i: index( $color-names-list, $color-name ) ;
        $color: nth( $color-list,$i);
        $border-color: getBorderColor($color);
        
        &.#{$color-name} {
            color: getColorFromBackground($color);
            background-color: nth( $color-list, $i );
            // box-shadow:
            //     0 1px lighten($border-color,30%) inset,
            //     0 -1px $border-color inset,
            //     1px 0 lighten($border-color,30%) inset,
            //     -1px 0 $border-color inset;

            &:hover{
                
                background-color: lighten( nth( $color-list, $i ),10%);
            }

            &:disabled{
                background-color: lighten( nth( $color-list, $i ), 20% );
                opacity:0.5;
                cursor: not-allowed;
            }
        }

        
        &.border-#{$color-name} {
            
            @include border-shadow( $color, 1px, 1px, 1px, 1px );
        }

    }
}

/* OTHERS FORM TAGS */
 
label {
    
    &> span{
        @include padding-right(1);
        @include min-width(3);
        display: inline-block;
    }

    &.line{
        display: flex;
        @include margin-top(1);
        @include margin-bottom(1);

        &>span{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        input, button, input[type=button]{
            flex:1;
        }
    }
}

fieldset{
    border:0;
    background: $white;
    border-radius: $border-radius-box;
    @include padding(1);
    @include margin-bottom(0.5);

    &>legend{
        @include font-size(0.5);
    }
}

/*
 * ADDITIONAL FORMATTING CLASSES
 */

.with-icon{

    position: relative;
    display: inline-block;

    &>input,&>button,&>select{

        vertical-align: middle;
    }

    &.with-icon-left{

        &>input,&>button,&>select{
            @include padding-left(1);
        }
    }

    &.with-icon-right{
        
        &>input,&>button,&>select{
            @include padding-right(1);
        }
    }

    &>.icon{

        position: absolute;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        @include font-size(0.5);
        color:#aaa;

        top:0;

        &.left{
            @include left(0.25);
        }

        &.right{
            @include right(0.25);
        }
    }
}

/* TODO change name */


@mixin stick {
    
    display: flex;

    button,input, select{
        border-radius: 0;
        
        // @include border-shadow( $field-border-color,1px,0,1px,1px );

        &:nth-child{
            border-radius: $border-radius 0 0 $border-radius;
            // @include border-shadow( $field-border-color,1px,0,1px,1px );
        }
        
        &:nth-last-child{
            border-radius: 0 $border-radius $border-radius 0;
            // @include border-shadow( $field-border-color,1px,1px,1px,1px );
        }
    }
}


.stick{
    @include stick();
}

.stick-center{
    
    @include stick();
    justify-content: center;
}

.stick-right{
    
    @include stick();
    justify-content: flex-end;
}

.stick-left{
    
    @include stick();
    justify-content: flex-start;
}

.loading{

    position: relative;


    @keyframes spin {
        0%{
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        100%{
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }
    
    &:before{

        content:"";
        
        animation: spin .5s infinite linear;
        position: absolute;
        border: $loading-border-size-em+rem solid #dbdbdb;
        border-radius: 100px;
        border-right-color: transparent;
        border-top-color: transparent;
        
        $size : $font-size-em;
        height: $size+rem;
        width: $size+rem;
        right:10px;

        top:50%;
        margin-top: -($size/2+$loading-border-size-em)+rem;
    }

    &.small:before{
        
        $size : $font-size-em*0.5;
        height: $size+rem;
        width: $size+rem;
        margin-top: -($size/2+$loading-border-size-em)+rem;
    }

    &.medium:before{
        
        $size : $font-size-em*1.5;
        height: $size+rem;
        width: $size+rem;
        margin-top: -($size/2+$loading-border-size-em)+rem;
    }

    &.big:before{
        
        $size : $font-size-em*2;
        height: $size+rem;
        width: $size+rem;
        margin-top: -($size/2+$loading-border-size-em)+rem;
    }
}