.btn.btn-icon-left-border,
.btn.btn-icon-right-border {
    position: relative;
}

.btn.btn-icon-left-border .icon,
.btn.btn-icon-right-border .icon {
    position: absolute;
    top: -2px!important;
    margin-right: 0!important;
    height: calc(100% + 4px)!important;
}
.btn.btn-icon-left-border .icon {
    left: -2px;
    border-right: 2px solid;
}
.btn.btn-icon-right-border .icon {
    right: -2px;
    border-left: 2px solid;
}

.btn.btn-small.btn-icon-left-border .icon,
.btn.btn-small.btn-icon-right-border .icon {
    width: 3.8rem!important;
}
.btn.btn-med.btn-icon-left-border .icon,
.btn.btn-med.btn-icon-right-border .icon {
    width: 4.6rem!important;
}
.btn.btn-large.btn-icon-left-border .icon,
.btn.btn-large.btn-icon-right-border .icon {
    width: 5.4rem!important;
}
.btn.btn-extra-large.btn-icon-left-border .icon,
.btn.btn-extra-large.btn-icon-right-border .icon {
    width: 6.1rem!important;
}

.btn.btn-small.btn-empty.btn-icon-left-border .icon,
.btn.btn-small.btn-empty.btn-icon-right-border .icon {
    width: 3.6rem!important;
}
.btn.btn-med.btn-empty.btn-icon-left-border .icon,
.btn.btn-med.btn-empty.btn-icon-right-border .icon {
    width: 4.4rem!important;
}
.btn.btn-large.btn-empty.btn-icon-left-border .icon,
.btn.btn-large.btn-empty.btn-icon-right-border .icon {
    width: 5.2rem!important;
}
.btn.btn-extra-large.btn-empty.btn-icon-left-border .icon,
.btn.btn-extra-large.btn-empty.btn-icon-right-border .icon {
    width: 5.9rem!important;
}

.btn.btn-icon-left-border .icon::before,
.btn.btn-icon-right-border .icon::before {
    position: absolute!important;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%,-50%);
}

.btn.btn-small.btn-icon-left-border .icon::before,
.btn.btn-small.btn-icon-right-border .icon::before {
    font-size: 1.6rem!important;
}
.btn.btn-med.btn-icon-left-border .icon::before,
.btn.btn-med.btn-icon-right-border .icon::before {
    font-size: 1.6rem!important;
}
.btn.btn-large.btn-icon-left-border .icon::before,
.btn.btn-large.btn-icon-right-border .icon::before {
    font-size: 1.8rem!important;
}
.btn.btn-extra-large.btn-icon-left-border .icon::before,
.btn.btn-extra-large.btn-icon-right-border .icon::before {
    font-size: 2.1rem!important;
}

.btn.btn-empty.btn-icon-left-border .icon::before,
.btn.btn-empty.btn-icon-right-border .icon::before {
    top: 50%!important;
    transform: translate(-50%,-50%);
}
.btn.btn-empty.btn-icon-left-border .icon::before {
    left: calc(50% + 1px)!important;
}
.btn.btn-empty.btn-icon-right-border .icon::before {
    left: calc(50% - 1px)!important;
}

.btn.btn-small.btn-icon-left-border {
    padding: 0.5rem 1.8rem 0.6rem 5.1rem;
}
.btn.btn-med.btn-icon-left-border {
    padding: 0.8rem 2.3rem 0.8rem 6.4rem;
}
.btn.btn-large.btn-icon-left-border {
    padding: 1.1rem 2.8rem 1rem 7.7rem;
}
.btn.btn-extra-large.btn-icon-left-border {
    padding: 1.3rem 3.3rem 1.2rem 8.9rem;
}

.btn.btn-small.btn-icon-right-border {
    padding: 0.5rem 5.1rem 0.6rem 1.8rem;
}
.btn.btn-med.btn-icon-right-border {
    padding: 0.8rem 6.4rem 0.8rem 2.3rem;
}
.btn.btn-large.btn-icon-right-border {
    padding: 1.1rem 7.7rem 1rem 2.8rem;
}
.btn.btn-extra-large.btn-icon-right-border {
    padding: 1.3rem 8.9rem 1.2rem 3.3rem;
}

.btn.btn-small.btn-empty.btn-icon-left-border {
    padding: 0.5rem 1.8rem 0.6rem 4.9rem;
}
.btn.btn-med.btn-empty.btn-icon-left-border {
    padding: 0.8rem 2.3rem 0.8rem 6.2rem;
}
.btn.btn-large.btn-empty.btn-icon-left-border {
    padding: 1.1rem 2.8rem 1rem 7.5rem;
}
.btn.btn-extra-large.btn-empty.btn-icon-left-border {
    padding: 1.3rem 3.3rem 1.2rem 8.7rem;
}

.btn.btn-small.btn-empty.btn-icon-right-border {
    padding: 0.5rem 4.9rem 0.6rem 1.8rem;
}
.btn.btn-med.btn-empty.btn-icon-right-border {
    padding: 0.8rem 6.2rem 0.8rem 2.3rem;
}
.btn.btn-large.btn-empty.btn-icon-right-border {
    padding: 1.1rem 7.5rem 1rem 2.8rem;
}
.btn.btn-extra-large.btn-empty.btn-icon-right-border {
    padding: 1.3rem 8.7rem 1.2rem 3.3rem;
}


.btn.btn-stretch {
    width: 100%;
    display: block;
}


.btn.btn-icon-left,
.btn.btn-icon-right {
    position: relative;
}

.btn.btn-small.btn-icon-left {
    padding: 0.5rem 1.8rem 0.6rem 4.6rem;
}
.btn.btn-med.btn-icon-left {
    padding: 0.8rem 2.3rem 0.8rem 5.4rem;
}
.btn.btn-large.btn-icon-left {
    padding: 1.1rem 2.8rem 1rem 6.5rem;
}
.btn.btn-extra-large.btn-icon-left {
    padding: 1.3rem 3.3rem 1.2rem 7.4rem;
}

.btn.btn-small.btn-icon-right {
    padding: 0.5rem 4.6rem 0.6rem 1.8rem;
}
.btn.btn-med.btn-icon-right {
    padding: 0.8rem 5.4rem 0.8rem 2.3rem;
}
.btn.btn-large.btn-icon-right {
    padding: 1.1rem 6.5rem 1rem 2.8rem;
}
.btn.btn-extra-large.btn-icon-right {
    padding: 1.3rem 7.4rem 1.2rem 3.3rem;
}

.btn.btn-icon-left .icon,
.btn.btn-icon-right .icon {
    position: absolute;
    top: -2px!important;
    margin-right: 0!important;
    height: calc(100% + 4px)!important;
}

.btn.btn-small.btn-icon-left .icon {
    left: 1.8rem;
}
.btn.btn-med.btn-icon-left .icon {
    left: 2.3rem;
}
.btn.btn-large.btn-icon-left .icon {
    left: 2.8rem;
}
.btn.btn-extra-large.btn-icon-left .icon {
    left: 3.3rem;
}

.btn.btn-small.btn-icon-right .icon {
    right: 1.8rem;
}
.btn.btn-med.btn-icon-right .icon {
    right: 2.3rem;
}
.btn.btn-large.btn-icon-right .icon {
    right: 2.8rem;
}
.btn.btn-extra-large.btn-icon-right .icon {
    right: 3.3rem;
}

.btn.btn-small.btn-icon-left .icon,
.btn.btn-small.btn-icon-right .icon {
    width: 1.6rem!important;
}
.btn.btn-med.btn-icon-left .icon,
.btn.btn-med.btn-icon-right .icon {
    width: 1.6rem!important;
}
.btn.btn-large.btn-icon-left .icon,
.btn.btn-large.btn-icon-right .icon {
    width: 1.8rem!important;
}
.btn.btn-extra-large.btn-icon-left .icon,
.btn.btn-extra-large.btn-icon-right .icon {
    width: 2.1rem!important;
}

.btn.btn-icon-left .icon::before,
.btn.btn-icon-right .icon::before {
    position: absolute!important;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%,-50%);
}

.btn.btn-small.btn-icon-left .icon::before,
.btn.btn-small.btn-icon-right .icon::before {
    font-size: 1.6rem!important;
}
.btn.btn-med.btn-icon-left .icon::before,
.btn.btn-med.btn-icon-right .icon::before {
    font-size: 1.6rem!important;
}
.btn.btn-large.btn-icon-left .icon::before,
.btn.btn-large.btn-icon-right .icon::before {
    font-size: 1.8rem!important;
}
.btn.btn-extra-large.btn-icon-left .icon::before,
.btn.btn-extra-large.btn-icon-right .icon::before {
    font-size: 2.1rem!important;
}


.btn.btn-gradient-background {
    border: none;
}

.btn.btn-small.btn-gradient-background {
    padding: 0.7rem 2rem 0.8rem;
}
.btn.btn-med.btn-gradient-background {
    padding: 1rem 2.5rem;
}
.btn.btn-large.btn-gradient-background {
    padding: 1.3rem 3rem 1.2rem;
}
.btn.btn-extra-large.btn-gradient-background {
    padding: 1.5rem 3.5rem 1.4rem;
}

.btn.btn-small.btn-icon-left-border.btn-gradient-background {
    padding: 0.7rem 2rem 0.8rem 5.3rem;
}
.btn.btn-med.btn-icon-left-border.btn-gradient-background {
    padding: 1rem 2.5rem 1rem 6.6rem;
}
.btn.btn-large.btn-icon-left-border.btn-gradient-background {
    padding: 1.3rem 3rem 1.2rem 7.9rem;
}
.btn.btn-extra-large.btn-icon-left-border.btn-gradient-background {
    padding: 1.5rem 3.5rem 1.4rem 9.1rem;
}

.btn.btn-small.btn-icon-right-border.btn-gradient-background {
    padding: 0.7rem 5.3rem 0.8rem 2rem;
}
.btn.btn-med.btn-icon-right-border.btn-gradient-background {
    padding: 1rem 6.6rem 1rem 2.5rem;
}
.btn.btn-large.btn-icon-right-border.btn-gradient-background {
    padding: 1.3rem 7.9rem 1.2rem 3rem;
}
.btn.btn-extra-large.btn-icon-right-border.btn-gradient-background {
    padding: 1.5rem 9.1rem 1.4rem 3.5rem;
}

.btn.btn-icon-left-border.btn-gradient-background .icon,
.btn.btn-icon-right-border.btn-gradient-background .icon {
    top: 0!important;
    height: 100%!important;
}
.btn.btn-icon-left-border.btn-gradient-background .icon {
    left: 0;
}
.btn.btn-icon-right-border.btn-gradient-background .icon {
    right: 0;
}


.btn.btn-small.btn-icon-left.btn-gradient-background {
    padding: 0.7rem 2rem 0.8rem 4.8rem;
}
.btn.btn-med.btn-icon-left.btn-gradient-background {
    padding: 1rem 2.5rem 1rem 5.6rem;
}
.btn.btn-large.btn-icon-left.btn-gradient-background {
    padding: 1.3rem 3rem 1.2rem 6.7rem;
}
.btn.btn-extra-large.btn-icon-left.btn-gradient-background {
    padding: 1.5rem 3.5rem 1.4rem 7.6rem;
}

.btn.btn-small.btn-icon-right.btn-gradient-background {
    padding: 0.7rem 4.8rem 0.8rem 2rem;
}
.btn.btn-med.btn-icon-right.btn-gradient-background {
    padding: 1rem 5.6rem 1rem 2.5rem;
}
.btn.btn-large.btn-icon-right.btn-gradient-background {
    padding: 1.3rem 6.7rem 1.2rem 3rem;
}
.btn.btn-extra-large.btn-icon-right.btn-gradient-background {
    padding: 1.5rem 7.6rem 1.4rem 3.5rem;
}

.btn.btn-icon-left.btn-gradient-background .icon,
.btn.btn-icon-right.btn-gradient-background .icon {
    top: 0!important;
    height: 100%!important;
}

.btn.btn-small.btn-icon-left.btn-gradient-background .icon {
    left: 2rem;
}
.btn.btn-med.btn-icon-left.btn-gradient-background .icon {
    left: 2.5rem;
}
.btn.btn-large.btn-icon-left.btn-gradient-background .icon {
    left: 3rem;
}
.btn.btn-extra-large.btn-icon-left.btn-gradient-background .icon {
    left: 3.5rem;
}

.btn.btn-small.btn-icon-right.btn-gradient-background .icon {
    right: 2rem;
}
.btn.btn-med.btn-icon-right.btn-gradient-background .icon {
    right: 2.5rem;
}
.btn.btn-large.btn-icon-right.btn-gradient-background .icon {
    right: 3rem;
}
.btn.btn-extra-large.btn-icon-right.btn-gradient-background .icon {
    right: 3.5rem;
}