// Name:            Form password
// Description:     Extends form component
//
// Component:       `uk-form`
//
// Sub-objects:     `uk-form-password`
//
// ========================================================================


// Variables
// ========================================================================

@form-password-font-size:                       13px;
@form-password-line-height:                     @form-password-font-size;
@form-password-color:                           #999;
@form-password-hover-color:                     #999;
@form-password-padding:                         50px;


/* ========================================================================
   Component: Form password
 ========================================================================== */

.uk-form-password {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.uk-form-password-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -(floor(@form-password-line-height/2));
    font-size: @form-password-font-size;
    line-height: @form-password-line-height;
    color: @form-password-color;
}

.uk-form-password-toggle:hover {
    color: @form-password-hover-color;
    text-decoration: none;
}

.uk-form-password > input { padding-right: @form-password-padding !important; }


// Hooks
// ========================================================================

.hook-form-password-misc;

.hook-form-password-misc() {}