.qodef-btn {
    display: inline-block;
    position: relative;
    outline: none;
    font-style: normal;
    font-weight: 900;
    font-family: 'Catamaran', serif;
    padding: 0 47px;
    font-size: 12px;
    line-height: 49px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: $default-heading-color;
    min-width: 171px;

    @include qodefTransition(color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out);
    @include qodefBoxSizing(border-box);

    &.qodef-btn-solid {
        background-color: $default-heading-color;
        border: 2px solid $default-heading-color;
        color: #fff;

        .qodef-hover-background {
            background-color: $first-main-color;
            border: 2px solid $first-main-color;
        }

        &:not(.qodef-btn-custom-hover-color):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            color: $default-heading-color !important;
        }

        &:not(.qodef-btn-custom-hover-bg):not([class*='qodef-btn-hover']):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            background-color: $first-main-color !important;
        }

        &:not(.qodef-btn-custom-border-hover):not([class*='qodef-btn-hover']):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            border-color: $first-main-color !important;
        }
    }

    &.qodef-btn-outline {
        border: 2px solid $default-heading-color;
        color: $default-heading-color;
        background-color: transparent;

        .qodef-hover-background {
            border:2px solid $default-heading-color;
            background-color: $default-heading-color;
        }

        &:not(.qodef-btn-custom-hover-color):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            color: #fff !important;
        }

        &:not(.qodef-btn-custom-hover-bg):not([class*='qodef-btn-hover']):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            background-color: $default-heading-color !important;
        }

        &:not(.qodef-btn-custom-border-hover):not([class*='qodef-btn-hover']):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            border-color: $default-heading-color !important;
        }
    }

    &.qodef-btn-transparent{
        border: none;
        background-color: transparent;
        padding:0 !important;

        &:not(.qodef-btn-custom-hover-color):hover {
            //important because of inline color attribute. :not is used so we don't have to use important in JS
            .qodef-button-icon {
                left: 4px;
            }
        }

        &.qodef-btn-icon {
            .qodef-btn-text {
                vertical-align: middle;
            }
            .qodef-button-icon {
                font-size: 18px;
                vertical-align: middle;
                position: relative;
                left: 0;
                @include qodefTransition(left 0.2s cubic-bezier(.1,0,.3,1));
            }
        }

    }

    &.qodef-btn-small {
        padding: 0 40px;
        font-size: 11px;
        line-height: 44px;
        min-width: 152px;
    }

    &.qodef-btn-medium {
        //same as default
    }

    &.qodef-btn-large {
        padding: 0 43px;
        font-size: 14px;
        line-height: 50px;
        min-width: 173px;
    }

    &.qodef-btn-huge,
    &.qodef-btn-huge-full-width {
        padding: 0 54px;
        font-size: 14px;
        line-height: 57px;
        min-width: 195px;
    }

    &.qodef-btn-huge-full-width {
        display: block;
        text-align: center;
    }

    &.qodef-btn-icon .qodef-btn-text {
        margin-right: 7px;
    }

    //Hover animations
    &[class*='qodef-btn-hover'] {
        .qodef-btn-text {
            position: relative;
            z-index: 10;	//over background
        }

        .qodef-hover-background {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;

            &.qodef-btn-solid {
                background-color: $default-heading-color;
                border: 2px solid $default-heading-color;
            }

            &.qodef-btn-outline {
                border: 2px solid $default-heading-color;
                background-color: transparent;
            }
        }

        &.qodef-btn-hover-sweep {
            .qodef-hover-background-holder {
                position: absolute;
                overflow: hidden;
                z-index: 1;
            }

            .qodef-hover-background {
                position: absolute;
                top: 0;
                left: 0;
                @include qodefTransform(translateY(100%));
                @include qodefTransition(transform .2s);
                border-radius: inherit;
            }

            &:hover {
                .qodef-btn-text {
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }

                .qodef-hover-background {
                    @include qodefTransform(translateY(0));
                }
            }
        }
    }
}

input[type=submit].qodef-btn,
button.qodef-btn {
    cursor: pointer;
}