.c-button {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    border: 1px solid config('colors.primary');
    padding-top: config('padding.3');
    padding-right: config('padding.6');
    padding-bottom: config('padding.3');
    padding-left: config('padding.6');
    color: config('colors.white');
    background-color: config('colors.primary');
    border-radius: .125rem;

    &:hover,
    &:focus,
    &:active {
        color: config('colors.primary');
        background-color: config('colors.white');
    }
}

.c-button--secondary {
    border: 1px solid config('colors.secondary');
    background-color: config('colors.secondary');

    &:hover,
    &:focus,
    &:active {
        color: config('colors.secondary');
        background-color: config('colors.white');
    }
}

.c-button--ghost {
    color: config('colors.primary');
    background-color: transparent;

    &:hover,
    &:focus,
    &:active {
        color: config('colors.white');
        background-color: config('colors.primary');
    }

    &.c-button--secondary {
        color: config('colors.secondary');

        &:hover,
        &:focus,
        &:active {
            color: config('colors.white');
            background-color: config('colors.secondary');
        }
    }
}

.c-button--pill {
    // Matches left- and right-padding value
    border-radius: 1.5rem;
}
