.c-button {
    font-weight: theme('fontWeight.normal');
    font-size: 1.125rem;
    text-decoration: none;
    display: inline-block;
    border: 1px solid theme('colors.cta.500');
    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.cta.500');
    transition: $transition-time ease-in-out;

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

.c-button--outlined {
    border: 1px solid #fff;
    color: #fff;
    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');
    }
}

// color variants (base-color is "cta" in city-theme)
.c-button--color-primary {
    background-color: theme('colors.primary.500');
    border-color: theme('colors.primary.500');

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

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

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

