/* ==========================================================================
   MathB Events Theme
   Buttons
   ========================================================================== */

/* ==========================================================================
   Base Button
   ========================================================================== */

.mathb-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    min-height: var(--mathb-button-height);

    padding: var(--mathb-button-padding);

    font-family: inherit;

    font-size: .95rem;

    font-weight: var(--mathb-fw-semibold);

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    border: 2px solid transparent;

    border-radius: var(--mathb-radius-pill);

    transition:
        background var(--mathb-transition),
        color var(--mathb-transition),
        border-color var(--mathb-transition),
        transform var(--mathb-transition),
        box-shadow var(--mathb-transition);

}

/* ==========================================================================
   Hover
   ========================================================================== */

.mathb-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {

    transform: translateY(-2px);

}

/* ==========================================================================
   Active
   ========================================================================== */

.mathb-button:active,
button:active {

    transform: translateY(0);

}

/* ==========================================================================
   Primary
   ========================================================================== */

.mathb-button,
.mathb-button-primary {

    color: var(--mathb-white);

    background: var(--mathb-primary);

}

.mathb-button:hover,
.mathb-button-primary:hover {

    color: var(--mathb-white);

    background: var(--mathb-primary-dark);

    box-shadow: var(--mathb-shadow-md);

}

/* ==========================================================================
   Secondary
   ========================================================================== */

.mathb-button-secondary {

    color: var(--mathb-white);

    background: var(--mathb-dark);

}

.mathb-button-secondary:hover {

    background: var(--mathb-dark-light);

}

/* ==========================================================================
   Outline
   ========================================================================== */

.mathb-button-outline {

    color: var(--mathb-primary);

    background: transparent;

    border-color: var(--mathb-primary);

}

.mathb-button-outline:hover {

    color: var(--mathb-white);

    background: var(--mathb-primary);

}

/* ==========================================================================
   White
   ========================================================================== */

.mathb-button-white {

    color: var(--mathb-heading);

    background: var(--mathb-white);

}

.mathb-button-white:hover {

    background: var(--mathb-light);

}

/* ==========================================================================
   Light
   ========================================================================== */

.mathb-button-light {

    color: var(--mathb-heading);

    background: var(--mathb-light);

}

.mathb-button-light:hover {

    background: var(--mathb-light-dark);

}

/* ==========================================================================
   Ghost
   ========================================================================== */

.mathb-button-ghost {

    color: inherit;

    background: transparent;

    border-color: transparent;

}

.mathb-button-ghost:hover {

    color: var(--mathb-primary);

}

/* ==========================================================================
   Dark Outline
   ========================================================================== */

.mathb-button-dark-outline {

    color: var(--mathb-heading);

    background: transparent;

    border-color: var(--mathb-heading);

}

.mathb-button-dark-outline:hover {

    color: var(--mathb-white);

    background: var(--mathb-heading);

}

/* ==========================================================================
   Sizes
   ========================================================================== */

.mathb-button-sm {

    min-height: 42px;

    padding: .7rem 1.25rem;

    font-size: .85rem;

}

.mathb-button-lg {

    min-height: 62px;

    padding: 1.15rem 2.75rem;

    font-size: 1.05rem;

}

/* ==========================================================================
   Full Width
   ========================================================================== */

.mathb-button-block {

    display: flex;

    width: 100%;

}

/* ==========================================================================
   Icon Buttons
   ========================================================================== */

.mathb-button-icon {

    width: 54px;

    height: 54px;

    padding: 0;

    border-radius: 50%;

}

.mathb-button-icon svg {

    width: 20px;

    height: 20px;

}

/* ==========================================================================
   Disabled
   ========================================================================== */

.mathb-button:disabled,
button:disabled,
input[type="submit"]:disabled {

    cursor: not-allowed;

    opacity: .5;

    transform: none;

    box-shadow: none;

}

/* ==========================================================================
   Loading
   ========================================================================== */

.mathb-button-loading {

    pointer-events: none;

    opacity: .8;

}

.mathb-button-loading::after {

    content: "";

    width: 16px;

    height: 16px;

    border: 2px solid rgba(255,255,255,.35);

    border-top-color: var(--mathb-white);

    border-radius: 50%;

    animation: mathb-button-spin .8s linear infinite;

}

/* ==========================================================================
   WooCommerce Buttons
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .checkout-button {

    border-radius: var(--mathb-radius-pill);

}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes mathb-button-spin {

    to {

        transform: rotate(360deg);

    }

}

/* ==========================================================================
   End
   ========================================================================== */