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

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

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

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

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

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

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

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

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