// Name:            Link
// Description:     Styles for links
//
// Component:       `uk-link-muted`
//                  `uk-link-text`
//                  `uk-link-reset`
//
// ========================================================================


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

@link-muted-color:                              @global-muted-color;
@link-muted-hover-color:                        @global-color;

@link-text-hover-color:                         @global-muted-color;


/* ========================================================================
   Component: Link
 ========================================================================== */


/* Muted
 ========================================================================== */

a.uk-link-muted,
.uk-link-muted a {
    color: @link-muted-color;
    .hook-link-muted;
}

a.uk-link-muted:hover,
.uk-link-muted a:hover {
    color: @link-muted-hover-color;
    .hook-link-muted-hover;
}


/* Text
 ========================================================================== */

/*
 * `!important` needed to override inverse component
 */

a.uk-link-text:not(:hover),
.uk-link-text a:not(:hover) {
    color: inherit !important;
    .hook-link-text;
}

a.uk-link-text:hover,
.uk-link-text a:hover {
    color: @link-text-hover-color;
    .hook-link-text-hover;
}


/* Reset
 ========================================================================== */

/*
 * `!important` needed to override inverse component
 */

a.uk-link-reset,
a.uk-link-reset:hover,
.uk-link-reset a,
.uk-link-reset a:hover {
    color: inherit !important;
    text-decoration: none !important;
    .hook-link-reset;
}


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

.hook-link-misc;

.hook-link-muted() {}
.hook-link-muted-hover() {}
.hook-link-text() {}
.hook-link-text-hover() {}
.hook-link-reset() {}
.hook-link-misc() {}


// Inverse
// ========================================================================

@inverse-link-muted-color:                        @inverse-global-muted-color;
@inverse-link-muted-hover-color:                  @inverse-global-color;
@inverse-link-text-hover-color:                   @inverse-global-muted-color;

.hook-inverse() {

    a.uk-link-muted,
    .uk-link-muted a {
        color: @inverse-link-muted-color;
        .hook-inverse-link-muted;
    }

    a.uk-link-muted:hover,
    .uk-link-muted a:hover {
        color: @inverse-link-muted-hover-color;
        .hook-inverse-link-muted-hover;
    }

    a.uk-link-text:hover,
    .uk-link-text a:hover {
        color: @inverse-link-text-hover-color;
        .hook-inverse-link-text-hover;
    }

}

.hook-inverse-link-muted() {}
.hook-inverse-link-muted-hover() {}
.hook-inverse-link-text-hover() {}
