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

    display: inline-block;
    padding: 14px 30px;
    margin: 0;
    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, padding 0s;

    &: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: transparent;
        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] {
        &:not(.c-btn--has-loader) {
            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: 19px 40px;
        min-width: 250px;
        background-position: center 60px;
        font-size: 'calc(%s + 2px)' % @font-size;
    }



    // Botão com loader

    &--has-loader {
        $icon-height = 24px;
        $border-offset = 2px;

        calculate-padding(height) {
            padding-top: ((height - $icon-height - $border-offset) / 2);
            padding-bottom: @padding-top;
        }

        height: 50px;
        calculate-padding(@height);

        &.c-btn--sm {
            height: 40px;
            calculate-padding(@height);
        }

        &.c-btn--lg {
            height: 60px;  
            calculate-padding(@height);  
        }

        .c-spinner {
            font-size: $icon-height;
            color: inherit;
        }
    }

    // Botão com icone

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