/*  ==========================================================================
    FORMS AND BUTTONS
    ========================================================================== */



/*
    Forms
    ==================================== */

.Form                           {}

.FormElement, .cf-form-field
                                { padding-top: 10px; padding-bottom: 10px; }
    .FormElement--group         { /*display: table;*/ position: relative; padding-top: 0; padding-bottom: 0; margin-top: 10px; margin-bottom: 10px; }
.FormElement label              { text-align: right; }
.cf-form-field-label            { position: relative; padding-left: $spacing-size-s + px; }
.cf-form-field label            { position: relative; font-weight: $font-weight-300; font-size: em(15); }

.cf-form-field-description      { display: block; font-size: em(14); font-style: italic; font-weight: $font-weight-300; }

.cf-form-required               { position: absolute; left: -10px; color: $color-error; border-bottom: none !important; }
.cf-form-optional               { font-style: italic; font-weight: $font-weight-300; color: $color-meta; }

.cf-form-error.cf-form-error {
    font-family: "Roboto", sans-serif;
    font-size: em(12);
    padding: 5px;
    line-height: 1;
    background: $color-error;
    color: #fff;
    .fa { margin-right: 5px; }
}


/* Forms */
input.ng-valid.ng-dirty, textarea.ng-valid.ng-dirty { border-color: $color-success; }
input.ng-invalid.ng-dirty, textarea.ng-invalid.ng-dirty { border-color: $color-error; }

.error { font: 10px "Courier New"; padding: 1px 5px 2px; background: #c00; color: #fff; }
.cf-form-error { display: none; }
.cf-form-error.exists.visible, .cf-form-submitted .cf-form-error.exists { display: inline-block; }

.cf-widget-collection-item { display: block; }



/*
    Form elements
    ==================================== */

.Input
{
    width: 100%;

    border: 1px solid $color-form-border;
    padding: 8px 10px;

    color: $color-default;
    font-weight: $font-weight-300;
    @include rem('font-size', 16px); //@include rem('line-height', 16px);

    @include transition(all 0.25s ease-out);
    //@include border-radius(1px);
    //@include box-shadow(inset 2px 2px 2px 0px rgba($color-light,.5));
    box-shadow: inset 2px 2px 2px 0px rgba($color-light,.5), 0px 0px 3px rgba($color-black,.05);

    @include hover {
        border-color: $color-brand-beta;
        box-shadow: 0px 0px 3px rgba($color-brand-beta,.15);
    }

}
    .FormElement--group:hover .Input {
        border-color: $color-brand-beta;
        box-shadow: 0px 0px 3px rgba($color-brand-beta,.15);
    }

    // select.Input                     { padding: 10px; }
    .Input[readonly], .Input[disabled]  { background: #ddd; border-color: #bbb !important; @include transition(none); }

    .FormElement--group .Input          { /*display: table-cell; float: left;*/ border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
    .FormElement--group .ButtonGroup    { /*display: table-cell; width: 1%;*/ vertical-align: middle; position: absolute; top: 1px; right: 1px; }

/*
    Sizes
*/
.Input--xsmall {
    padding: 4px 10px 5px;
    border: 1px solid $color-form-border-light;
    @include rem('font-size', 14px); //@include rem('line-height', 14px);
    box-shadow: none;
}
    select.Input--xsmall { padding-top: 5px; padding-bottom: 6px; }

.Input--small {
    padding: 6px 10px 7px;
    border: 1px solid $color-form-border-light;
    @include rem('font-size', 15px); //@include rem('line-height', 15px);
    box-shadow: none;
}
    select.Input--small { padding-top: 5px; padding-bottom: 6px; }

.cf-form-field-element .cke { margin-top: $spacing-size-xs + px; }



/*
    Buttons
    ==================================== */

.Button {
    //@include background-image(linear-gradient($color-brand-alpha, darken($color-brand-alpha,2%)));
    @include inline-block;
    @include rem('font-size', 15px);
    @include rem('line-height', 15px);
    @include transition(all 0.25s ease-out);
    @include user-select(none);
    @include appearance(none);
    background-color: $color-brand-alpha;
    border: none;
    border-radius: $border-radius-s;
    box-shadow: inset 0 0 0 1px rgba(#000,0.1);
    color: $color-white;
    cursor: pointer;
    margin: 0;
    padding: 15px 35px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba($color-black,.20);
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;

    @include hover {
        //@include background-image(linear-gradient($color-brand-gamma, darken($color-brand-gamma,2%)));
        background-color: $color-brand-gamma;
        color: $color-white;
    }

    @include active {
        background-color: #004b7f;
        color: #c4def2;
        text-shadow: 0px -1px 0px rgba($color-black,.20);
    }

    .ButtonGroup & {
        background: transparent;
        border: none;
        border-radius: $border-radius-0;

    }

}

/*
    Styles
*/
//.Button--def {}

.Button--neutral
{
    background-color: $color-note;
    //border: 1px solid $color-info;
    padding: 9px 21px;

    @include text-shadow(0px 1px 0px rgba($color-white,.8));
    color: $color-dark;

    @include hover {
        background-color: $color-white;
        color: $color-black;
    }

    &.Button--large {
        padding: 14px 29px;
    }

}

.Button--simple {
    box-shadow: none;
    color: $color-form-border-light;
    padding: 9px 12px;
    text-shadow: none;

    @include hover {
        background: transparent;
        color: $color-black;
    }

    .Panel-search .FormElement--group &,
    .Search .FormElement--group & {
        border-left: 1px solid #fff;
    }

    @media screen and (min-width:mq-em($bp-delta)) {
        .Panel-search .FormElement--group:hover &,
        .Search .FormElement--group:hover & {
            border-left: 1px solid #eee;
        }
    }

    .Search.is-expanded .FormElement--group:hover & {
        border-left: 1px solid #eee;
    }

    .Search & {
        padding: 8px 12px;
    }

}

.Button--warning
{
    background-color: $color-error;

    @include hover {
        background-color: $color-black;
        color: $color-white;
    }
}

.Button--action
{
    font-weight: $font-weight-500;
    background-color: $color-success;

    @include hover {
        background-color: $color-brand-gamma;
        color: $color-white;
    }

    &.Button--large {
        font-weight: $font-weight-600;
    }
}

.Button--disabled {
    background: transparent url(/images/framework/treeview-disabled.gif) repeat;
    color: #c6c6c6;
    cursor: default;
    text-shadow: 0px 1px 0px $color-white;
}





/*
    Sizes
*/
.Button--xsmall {
    @include rem('font-size', 11px);
    @include rem('line-height', 12px);
    padding: .5em 1.5em;
}
.Button--small {
    @include rem('font-size', 12px);
    @include rem('line-height', 15px);
    padding: .25em .75em;
}
.Button--medium {
    @include rem('font-size', 12px);
    padding: 10px 15px;
}
.Button--large {
    padding: 15px 30px;
    @include rem('font-size', 16px); @include rem('line-height', 16px);
}

.Button--wider {
    padding-left: 60px;
    padding-right: 60px;
}

/*
    Extra
*/
.Button--full
{
    display: block; width: 100%; padding-left: 0; padding-right: 0;
}


/*
    Specific buttons
*/



/*
    Badges
    ==================================== */

.Badge
{
    position: absolute; top: 5px; right: 5px;
    cursor: pointer; display: inline-block; margin: 0; padding: 0;
    text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; white-space: nowrap;

    min-width: 16px;
    padding: .3em;

    @include rem('font-size', 10px); @include rem('line-height', 10px);
    color: $color-white; font-weight: $font-weight-500;

    @include border-radius($border-radius-round);
    @include wb-gradient-def;
    background-color: $color-brand-alpha;

    @include transition(all 0.25s ease-out);

    @include text-shadow(0px 1px 0px rgba($color-black,.15));

    @include hover {
        background-color: $color-black;
    }
}

/*
    Styles
*/
.Badge--def
{
    //@include box-shadow(0px 0px 2px 2px rgba($color-brand-beta,.2));
    background-color: $color-brand-beta;

    @include hover {
        background-color: $color-brand-gamma;
        color: $color-white;
    }
}
.Badge--alert
{
    //@include box-shadow(0px 0px 2px 2px rgba($color-error,.2));
    background-color: $color-error;

    @include hover {
        background-color: $color-black;
        color: $color-white;
    }
}
.Badge--action
{
    //@include box-shadow(0px 0px 2px 2px rgba($color-success,.2));
    background-color: $color-success;

    @include hover {
        background-color: $color-brand-beta;
        color: $color-white;
    }
}

/* icon status */

.icon-status {
    font-size: 8px;
    position: absolute;
    top: 3px;
    right: 4px;
}
