.c-button {
    font-weight: theme('fontWeight.normal');
    font-size: 1.125rem;
    text-decoration: none;
    display: inline-block;
    border: 1px solid theme('colors.primary.600');
    padding-top: theme('padding.3');
    padding-right: theme('padding.8');
    padding-bottom: theme('padding.3');
    padding-left: theme('padding.8');
    color: #fff;
    background-color: theme('colors.primary.500');
    transition: $transition-time ease-in-out;

    &:hover,
    &:active,
    &:focus {
        border-color: theme('colors.primary.600');
        color: #fff;
        background-color: theme('colors.primary.600');
    }
}

.c-button--outlined {
    @apply border border-white text-white;
    background-color: transparent;
}

.c-button--soft-rounded {
    border-radius: 6px;
}

.c-button--hard-rounded {
    border-radius: 999px;
}

.c-button-close {
    display: flex;
    align-items: center;
    padding: theme('padding.3') theme('padding.4');
    margin: theme('margin.32') auto theme('margin.8');
    border-color: white;

    .c-icon {
        font-size: .875rem;
        margin-left: theme('margin.2');
    }
}
