.c-button {
    background-color: $color-yellow;
    border: 1px solid $color-yellow;
    border-radius: $border-radius;
    color: $color-black;
    cursor: pointer;
    display: inline-block;
    font-weight: $font-weight-bold;
    padding: .625rem;
    text-decoration: none;

    @include transition(background-color, border, color, box-shadow);

    &:active,
    &:focus,
    &:hover {
        background-color: $color-black;
        border-color: $color-black;
        color: $color-white;
    }

    &:focus {
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, .2);
        outline: none;
    }

    &--secondary {
        background-color: $color-white;
        border-color: $color-black;
        color: $color-black;

        &:active,
        &:focus,
        &:hover {
            background-color: $color-white;
            border-color: $color-grey-lighter;
            color: $color-black;
        }
    }

    &--disabled {
        background-color: $color-white;
        border-color: $color-grey-lighter;
        color: $color-grey;
        cursor: not-allowed;

        &:active,
        &:focus,
        &:hover {
            background-color: $color-white;
            border-color: $color-grey-lighter;
            color: $color-grey;
            outline: none;
        }
    }

    &--ghost {
        background-color: transparent;
        border-color: $color-black;
    }

    &--shrink {
        padding: .625rem 1.25rem;
    }

    &--full {
        display: block;
        text-align: center;
        width: 100%;
    }
}