%btn {
    overflow: hidden;
    background: $btn;
    padding: .5em .8em .5em .8em;
    border-radius: 3px;
    font-size: .85em;
    line-height: 1.1;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    /* Improves usability and consistency of cursor style between image-type 'input' and others */
    -webkit-appearance: none;
    /* Corrects inability to style clickable 'input' types in iOS */
    -webkit-transition: all .2s;
    transition: all .2s;
}


%buttons {

    .enp-btn {
        @extend %btn;
    }

    .enp-btn:hover {
        background: $btn_hover;
        color: #fff;
    }

    .enp-btn:active {
        background: $btn_active;
    }

    .enp-btn--click-wait,
    .enp-btn--click-wait:active,
    .enp-btn--click-wait:hover,
    .enp-btn--require-logged-in,
    .enp-btn--require-logged-in:hover,
    .enp-btn--require-logged-in:active {
        background: $btn_hover;
        cursor: default;
    }

    .enp-btn--disabled,
    .enp-btn--disabled:active,
    .enp-btn--disabled:hover {
        background: $disabled_bg;
        color: $disabled_color;
    }

    .enp-btn--user-clicked,
    .enp-btn--increased{
        background: $btn_hover;
    }

    @include enpButtonIcons(#ffffff);

}