// Name:            Totop
// Description:     Component to create an icon to scroll back to top
//
// Component:       `uk-totop`
//
// ========================================================================


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

@totop-padding:                                 5px;
@totop-color:                                   fadeout(@global-color, 40%);

@totop-hover-color:                             fadeout(@global-color, 20%);

@totop-active-color:                            fadeout(@global-color, 10%);

@internal-image-totop:                          "../../../images/totop.svg";


/* ========================================================================
   Component: Totop
 ========================================================================== */

/*
 * Icon
 */

.uk-totop::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-image-totop); }

/*
 * Addopts `uk-icon`
 */

.uk-totop {
    padding: @totop-padding;
    color: @totop-color;
    .hook-totop;
}

/* Hover + Focus */
.uk-totop:hover,
.uk-totop:focus {
    color: @totop-hover-color;
    outline: none;
    .hook-totop-hover;
}

/* OnClick */
.uk-totop:active {
    color: @totop-active-color;
    .hook-totop-active;
}


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

.hook-totop-misc;

.hook-totop() {}
.hook-totop-hover() {}
.hook-totop-active() {}
.hook-totop-misc() {}


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

@inverse-totop-color:                       fadeout(@inverse-global-color, 40%);
@inverse-totop-hover-color:                 fadeout(@inverse-global-color, 20%);
@inverse-totop-active-color:                fadeout(@inverse-global-color, 10%);

.hook-inverse() {

    .uk-totop {
        color: @inverse-totop-color;
        .hook-inverse-totop;
    }

    .uk-totop:hover,
    .uk-totop:focus {
        color: @inverse-totop-hover-color;
        .hook-inverse-totop-hover;
    }

    .uk-totop:active {
        color: @inverse-totop-active-color;
        .hook-inverse-totop-active;
    }

}

.hook-inverse-totop() {}
.hook-inverse-totop-hover() {}
.hook-inverse-totop-active() {}