.mcm-button-module {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem auto;
}

.mcm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    border: 2px solid transparent;
}


/* Default */
.mcm-btn--color-default.mcm-btn--filled,
.mcm-btn--color-default.mcm-btn--attention {
    background-color: #ffffff;
    color: var(--theme-button-color, var(--color-primary));
    border-color: #ffffff;
}
.mcm-btn--color-default.mcm-btn--filled:hover,
.mcm-btn--color-default.mcm-btn--attention:hover {
    background-color: var(--theme-button-color, var(--color-primary));
    color: #ffffff !important;
    border-color: var(--theme-button-color, var(--color-primary));
}
.mcm-btn--color-default.mcm-btn--outlined {
    background-color: transparent;
    color: #ffffff !important;
    border-color: #ffffff;
}
.mcm-btn--color-default.mcm-btn--outlined:hover {
    color: var(--theme-button-color, var(--color-primary)) !important;
    border-color: var(--theme-button-color, var(--color-primary));
}


/* Hero */
.mcm-btn--color-hero.mcm-btn--filled,
.mcm-btn--color-hero.mcm-btn--attention {
    background-color: var(--theme-hero-button-background, var(--color-primary));
    color: var(--theme-hero-button-color, var(--color-primary)) !important;
    border-color: var(--theme-hero-button-background, var(--color-primary));
}
.mcm-btn--color-hero.mcm-btn--filled:hover,
.mcm-btn--color-hero.mcm-btn--attention:hover {
    background-color: var(--color-primary);
    color: #ffffff !important;
    border-color: var(--color-primary);
}
.mcm-btn--color-hero.mcm-btn--outlined {
    background-color: transparent;
    color: var(--theme-hero-button-background, var(--color-primary)) !important;
    border-color: var(--theme-hero-button-background, var(--color-primary));
}


/* Attention */
.mcm-btn--color-attention.mcm-btn--filled,
.mcm-btn--color-attention.mcm-btn--attention {
    background-color: #81d1f7;
    color: var(--theme-hero-button-attention-color, var(--color-primary)) !important;
    border-color: #81d1f7;
}
.mcm-btn--color-attention.mcm-btn--filled:hover,
.mcm-btn--color-attention.mcm-btn--attention:hover {
    background-color: var(--theme-hero-button-attention-color, var(--color-primary));
    color: #81d1f7 !important;
    border-color: var(--theme-hero-button-attention-color, var(--color-primary));
}
.mcm-btn--color-attention.mcm-btn--outlined {
    background-color: transparent;
    color: #81d1f7 !important;
    border-color: #81d1f7;
}


/* External */
.mcm-btn--color-external.mcm-btn--filled,
.mcm-btn--color-external.mcm-btn--attention {
    background-color: var(--color-primary);
    color: #ffffff !important;
    border-color: var(--color-primary);
}
.mcm-btn--color-external.mcm-btn--filled:hover,
.mcm-btn--color-external.mcm-btn--attention:hover {
    background-color: #ffffff;
    color: var(--color-primary) !important;
    border-color: #ffffff;
}
.mcm-btn--color-external.mcm-btn--outlined {
    background-color: transparent;
    color: var(--color-primary) !important;
    border-color: var(--color-primary);
}
.mcm-btn--color-external.mcm-btn--outlined:hover {
    color: #ffffff;
    border-color: #ffffff;
}


/* Shared */
.mcm-btn--attention {
    border-radius: 2rem;
}

.mcm-btn:hover {
    text-decoration: none;
}