// Name:            Form password
// Description:     Extends form component
//
// Component:       `uk-form`
//
// Sub-objects:     `uk-form-password`
//
// Markup:
//
// <!-- uk-form-password addon -->
// <form class="uk-form">
//     <div class="uk-form-password">
//         <input type="password">
//         <a href="" class="uk-form-password-toggle" data-uk-form-password></a>
//     </div>
// </form>
//
// ========================================================================


// 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
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Prevent `inline-block` consequences
 */

.uk-form-password {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    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() {}