.btn-base {
    //reset
    background: none;
    border: 0;
    font: inherit;
    overflow: visible;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    //classe setup
    background: $color-slate;
    border: none;
    line-height: 4.0rem;
    color: $color-snow;
    fill: $color-snow;
    border-radius: .3rem;
    height: 4.0rem;
    vertical-align: top;
    text-align: center;
    text-decoration: none;
    width: auto;
    letter-spacing: 0;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s;
    text-transform: uppercase;

    &:last-child {
        margin-right: 0;
    }

    &[disabled] {
        cursor: not-allowed;
        opacity: .4;
    }

    &:hover {
        background-color: $color-silver;
        transition: all 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s;
    }

    &:hover[disabled] {
        background-color: $color-black;
    }

    & + .btn {
        margin-left: .5rem;
    }
}

/***** Sizes *****/

.btn-size-xs {
    padding: 0 1.0rem;
    line-height: 2.0rem;
    height: 2.0rem;
    min-width: 2.0rem;
    font-size: 1rem;
}

.btn-size-s {
    padding: 0 1.0rem;
    line-height: 3.0rem;
    height: 3.0rem;
    min-width: 3.0rem;
    font-size: 1.1rem;
}

.btn-size-m {
    padding: 0 1.5rem;
    line-height: 4.0rem;
    min-height: 4.0rem;
    min-width: 4.0rem;
    font-size: 1.1rem;
}

.btn-size-l {
    padding: 0 2.0rem;
    line-height: 5.0rem;
    min-height: 5.0rem;
    min-width: 5.0rem;
    font-size: 2.0rem;
}

.btn-size-xl {
    padding: 0 2.5rem;
    line-height: 6.0rem;
    min-height: 6.0rem;
    min-width: 6.0rem;
    font-size: 2.0rem;
}

.btn-width-100 {
    margin: 0 0 1.0rem;
    width: 100%;
}

.btn-width-50 {
    margin: 0 0 1.0rem;
    width: 50%;
}

.btn-color-default, .btn-color-default:hover[disabled] {
    background-color: $color-main;
    border-color: $color-main;

    &:hover {
        background-color: darken($color-main, 10%);
        border-color: darken($color-main, 10%);
    }
}

/***** Color - featured *****/
.btn-color-featured, .btn-color-featured:hover[disabled] {
    background-color: $color-featured;
    border-color: $color-featured;

    &:hover {
        background-color: darken($color-featured, 10%);
        border-color: darken($color-featured, 10%);
    }
}

/***** Color - positive *****/
.btn-color-positive, .btn-color-positive:hover[disabled] {
    background-color: $color-positive;
    border-color: $color-positive;

    &:hover {
        background-color: $color-positive-dark;
        border-color: $color-positive-dark;
    }
}

/***** Color - Information *****/
.btn-color-info, .btn-color-info:hover[disabled] {
    background-color: $color-info;
    border-color: $color-info;

    &:hover {
        background-color: $color-info-dark;
        border-color: $color-info-dark;
    }

}

/***** Color - Warning *****/
.btn-color-warning, .btn-color-warning:hover[disabled] {
    background-color: $color-warning;
    border-color: $color-warning;

    &:hover {
        background-color: $color-warning-dark;
        border-color: $color-warning-dark;
    }
}

/***** Color - negative *****/
.btn-color-negative, .btn-color-negative:hover[disabled] {
    background-color: $color-negative;
    border-color: $color-negative;

    &:hover {
        background-color: $color-negative-dark;
        border-color: $color-negative-dark;
    }

}

/***** Color - None *****/
.btn-color-none, .btn-color-none:hover[disabled], .btn-color-none:hover {
    background-color: transparent;
    border-color: transparent;
    color: $color-slate;
    fill: $color-slate;
}

/***** Ghost *****/
.btn-style-ghost {
    background-color: transparent;
    color: $color-silver;
    fill: $color-silver;
    border: 0.1rem solid $color-silver;

    &:hover {
        background-color: $color-silver;
        color: $color-snow;
        fill: $color-snow;
    }
}

/***** Link *****/
.btn-style-link {
    background-color: transparent;
    fill: $color-slate;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all .2s ease-in-out;
    font-weight: 600;
    border: none;
    color: $color-silver;

    &:hover {
        color: $color-featured;
        background-color: transparent;
    }

    &.disabled {
        opacity: 0.3;
        cursor: default;
    }
}

/***** Color - Hover *****/
.btn-hover-color-positive:hover {
    border-color: $color-positive;
    background-color: $color-positive;
    color: $color-snow;
    fill: $color-snow;
}

.btn-hover-color-info:hover {
    border-color: $color-info;
    background-color: $color-info;
    color: $color-snow;
    fill: $color-snow;
}

.btn-hover-color-warning:hover {
    border-color: $color-warning;
    background-color: $color-warning;
    color: $color-snow;
    fill: $color-snow;
}

.btn-hover-color-negative:hover {
    border-color: $color-negative;
    background-color: $color-negative;
    color: $color-snow;
    fill: $color-snow;
}
