//
//  Form styles
//  _____________________________________________


.form{}
fieldset,
.fieldset{
    outline: none;
}

//Form layout
.field{
    margin-bottom: $indent-small;
    position: relative;
    &.additional,
    &.choice{
        margin-bottom: 0;
    }
    .label,
    label{
        margin-right: $gutter-width;
        line-height: $input-line-height;
        padding: $input-padding-vert 0;
        display: inline-block;
    }
    .control{
    }
    .checkbox{
        margin: .75rem .5rem 0 0;
    }
    input.qty{
        width: 6rem;
    }
}

.form.inline{
    .field-wrap{
    }
    .actions{
    }
}

//Typography
.legend,
legend{
    font-size: 1rem;
    font-weight: 600;
    +br{
        display: none;
    }
}
.control{
    .nested{
        margin-top: $indent-small;
        .field{
            margin-bottom: 0;
        }
    }
}

input[type="text"], .input-text,
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
    display: block;
    width: 100%;
    padding: $input-padding-vert $input-padding-hor;
    font-size:$input-font-size;
    line-height:$input-line-height;
    background: $input-bg-color;

    &.mage-error{
        border: solid 1px red;
        font-style: normal;
    }
}
select{
    height: $input-height;
}
textarea{
    max-width: 100%;
}
.radio,
input[type="checkbox"],
input[type="radio"]{
    display: inline-block;
    width: auto;
    height: $input-line-height;
    margin: $input-padding-vert $input-padding-vert 0 0;
}

.email{}

p.required{
    color: $red;
}

//Inline form
.form-inline{
    @include make-flex();
    .control{
        input,
        select,
        textarea{
            width: auto;
        }
    }
}

.fieldset > .field.required > .label::after, 
.fieldset > .fields > .field.required > .label::after {
    color: $red;
    content: "*";
    font-size: 12px;
    margin: 0 0 0 5px;
}

//
//  Button styles
//  ---------------------------------------------

//Block buttons
.actions .action,
.actions-toolbar .action,
.box-actions .action,
.product-item-actions .action,
.checkout.methods .action{
    @include button-block();
}

//Primary Buttons
.actions-primary .action,
.primary .action,
.action.primary,
.checkout.methods .primary{
    @include button-block__primary();
}

//Icon buttons
a.action{
    &.delete,
    &.edit,
    &.change-password{
        display: inline-block;
        padding: $button-padding-vert $button-padding-hor;
        span{
            display: none;
        }
    }

    &.delete{
        @include font-icon('\f00d');
    }
    &.edit{
        @include font-icon("\f044");
    }
}


.actions-toolbar{
    @include make-flex();
    margin: 0 -0.25rem;
    .action{
        margin: 0 0.25rem;
        display: inline-block;
    }
    .primary{}
    .secondary{
    }
}


//
//  Messages styles
//  ---------------------------------------------

.mage-error{
    font-size: .8rem;
    line-height:1.2rem;
    font-style: italic;
    color: #F11F17;
    padding: $input-padding-vert $input-padding-hor;
}