.c-btn {
    $btn-color = $color--main;

    display: inline-block;
    padding: 14px 30px;
    vertical-align: middle;
    border: solid 1px transparent;
    border-radius: 30px;
    background-color: $btn-color;
    btn-background(rgba(255,255,255,.1));
    background-repeat: repeat-x;
    background-position: center 50px;
    max-width: 100%;
    min-width: 204px;
    font-size: 1rem;
    font: inherit;
    font-weight: $font--bold;
    color: #fff;
    text-transform: uppercase;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    text-ellipsis();
    transition: .4s ease-out, background-position .8s ease-out;

    &:hover {
        background-position: center -80px;
        color: @color;
        text-decoration: none;
    }

    &:active, &:focus {
        box-shadow: inset 0 0 0 100px darken($btn-color, 40%);
        color: #fff;
    }

    // Botão alternativo com outline

    &--outline{
        border-color: $btn-color;
        background-color: #fff;
        btn-background(convert-rgb($btn-color)); // a cor precisa estar no formato rgb() para não dar problema no firefox
        color: $btn-color;
    }



    // Botão desabilitado

    &--disabled, &[disabled] {
        background-image: none;
        background-color: $color--gray-2;
        border-color: transparent;
        color: $color--gray-1;
        cursor: default;

        &:hover {
            background-color: @background-color;
            color: @color;
        }

        &:active, &:focus {
            box-shadow: none;
            color: @color;
        }
    }



    // Botão com variação de tamanho

    &--sm {
        padding: 9px 10px;
        min-width: 194px;
        background-position: center 40px;
        font-size: 'calc(%s - 2px)' % @font-size;
    }

    &--lg {
        padding: 20px 40px;
        min-width: 250px;
        background-position: center 60px;
        font-size: 'calc(%s + 2px)' % @font-size;
    }



    // Botão com loader

    &--has-loader {
        height: 50px;
        padding-top: 0;
        padding-bottom: @padding-top;

        &:before {
            content: '\f';
            text-indent: -9999em;
        }

        &.c-btn--sm {
            height: 40px;
        }

        &.c-btn--lg {
            height: 60px;    
        }

        .o-spinner {
            font-size: 24px;
            color: inherit;
        }
    }

    // Botão com icone

    &--has-icon {
        position: relative;
        padding-left: 60px;
    }
    &__icon {
        position: absolute;
        left: 20px;
        width: 20px;
        height: 20px;
    }
}