//
// Component: Icon
//
// ========================================================================


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


.uk-icon > svg {

     /* Inherit the textâ€™s size too. Also allows sizing the icon by changing its font-size. */
     width: 1em;
     height: 1em;

     /* Nice visual alignment for icons alongside text. (I got a few questions about
         this and: with most fonts and styles, this works better than just
        vertical-align:middle. Try it and see what you like best. */
     vertical-align: -0.15em;

     /* default: 100%  -> 16px but needed 20px to not break compatibility */
     font-size: 1.25em;
}

// Style modifiers
// ========================================================================

//
// Link
//

.hook-icon-link() {}

.hook-icon-link-hover() {}

.hook-icon-link-active() {}

//
// Button
//

.hook-icon-button() {
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

.hook-icon-button-hover() {}

.hook-icon-button-active() {}


// Miscellaneous
// ========================================================================

.hook-icon-misc() {}


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

.hook-inverse-icon-link() {}
.hook-inverse-icon-link-hover() {}
.hook-inverse-icon-link-active() {}

.hook-inverse-icon-button() {}
.hook-inverse-icon-button-hover() {}
.hook-inverse-icon-button-active() {}
