.button {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1rem);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    min-height: var(--height, 3rem);
    line-height: var(--line-height, inherit);
    margin-top: 1.5rem;
    margin-right: 1rem;
}

.button.button--small {
    min-height: var(--height, 2rem);
    margin: 0;
}

.button__body {
    font-size: var(--font-size, 0.889em);
    line-height: var(--line-height, inherit);
    color: var(--color, white);

    border-top-width: var(--border-top-width, 0.125rem);
    border-right-width: var(--border-right-width, 0.125rem);
    border-bottom-width: var(--border-bottom-width, 0.125rem);
    border-left-width: var(--border-left-width, 0.125rem);

    border-top-style: var(--border-top-style, solid);
    border-right-style: var(--border-right-style, solid);
    border-bottom-style: var(--border-bottom-style, solid);
    border-left-style: var(--border-left-style, solid);

    border-top-color: var(--border-top-color, #000714);
    border-right-color: var(--border-right-color, #000714);
    border-bottom-color: var(--border-bottom-color, #000714);
    border-left-color: var(--border-left-color, #000714);

    border-radius: var(--border-radius, 0.188rem);
    background-color: var(--background-color, #0349D1);
}

.button__body .icon {
    fill: currentColor;
}

/* CTA Button */
.button.button--cta {
    min-height: calc(2 * var(--height, 3rem));
}

.button.button--cta .button__body {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.button__cta {
    color: var(--color, black);
    background-color: var(--color-background, white);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.875rem);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    line-height: var(--line-height, 1.142857143);
    border-width: var(--border-width, 0.125rem);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, #000714);
    border-radius: var(--border-radius, 0.188rem);
    border-top-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 30rem) {
    .button.button--cta {
        min-height: var(--height, 3rem);
    }

    .button.button--cta .button__body {
        border-bottom-width: var(--border-width, 0.125rem);
        border-bottom-left-radius: var(--border-radius, 0.188rem);
        border-right-width: 0;
        border-top-right-radius: 0;
    }

    .button__cta {
        border-top-width: var(--border-width, 0.125rem);
        border-top-right-radius: var(--border-radius, 0.188rem);
        border-left-width: 0;
        border-bottom-left-radius: 0;
    }
}
