:root {
    --btn-text-hover-bg: linear-gradient(0deg, var(--overlay-white-80-white, rgba(255, 255, 255, 0.80)) 0%, var(--overlay-white-80-white, rgba(255, 255, 255, 0.80)) 100%), var(--color-brand-base, #005B93);
    --btn-text-active-bg: linear-gradient(0deg, var(--overlay-white-60-white, rgba(255, 255, 255, 0.60)) 0%, var(--overlay-white-60-white, rgba(255, 255, 255, 0.60)) 100%), var(--color-brand-base, #005B93);
    --btn-primary-hover-bg: linear-gradient(0deg, var(--overlay-black-20-black, rgba(0, 0, 0, 0.20)) 0%, var(--overlay-black-20-black, rgba(0, 0, 0, 0.20)) 100%), var(--color-brand-base, #005B93);
    --btn-primary-active-bg: linear-gradient(0deg, var(--overlay-black-40-black, rgba(0, 0, 0, 0.40)) 0%, var(--overlay-black-40-black, rgba(0, 0, 0, 0.40)) 100%), var(--Base-Brand-Brand-Base, #005B93);

    --dropshadow-pressed: 0 0 15px 0 rgba(255, 255, 255, 0.35) inset;
    --dropshadow-hover: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
}

/* Base Class */
.tw-btn {
    display: inline-flex;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    border-radius: 6.25rem;
    /* transition: all 0.2s ease-in-out; Important: the transition does not play well with gradient backgrounds */
    outline: 0px solid transparent;
    text-decoration: none;

    /* Label/Label */
    font-family: var(--font-montserrat);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.03rem;
}

.tw-btn:disabled,
.tw-btn[disabled],
.tw-btn[aria-disabled="true"],
.tw-btn.disabled {
    color: var(--color-neutral-gray-5);
    background: var(--color-neutral-gray-9);
}

/* Size Variants */

.tw-btn-small {
    padding: 0.375rem 0.75rem;
    /* Label/Label Small */
    font-family: var(--font-montserrat);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
    letter-spacing: 0.02625rem;
}

.tw-btn-large {
    padding: .75rem 1.5rem;

    /* Label/Label Large */
    font-family: var(--font-montserrat);
    font-size: 1.125rem;
    font-style: normal;
    /* font-weight: 500; */
    line-height: 1.375rem;
    letter-spacing: 0.03375rem;
}

/* Primary */

.tw-btn-primary {
    border-radius: 6.25rem;
    background: var(--color-brand-base);
    color: var(--color-white) !important;
}

.tw-btn-primary:hover {
    color: var(--color-white);
    background: var(--btn-primary-hover-bg);
    box-shadow: var(--dropshadow-hover);
}

.tw-btn-primary:active {
    color: var(--color-white);
    background: var(--btn-primary-active-bg);
    box-shadow: var(--dropshadow-pressed);
}

/* .tw-btn-text {
    background: transparent;
    border: 0px solid transparent;
} */

.tw-btn-text-primary {
    background: transparent;
    border: 0px solid transparent;
    color: var(--color-brand-base);
}

.tw-btn-text-primary:hover {
    background: var(--btn-text-hover-bg);
}

.tw-btn-text-primary:active {
    background: var(--btn-text-active-bg);
    box-shadow: var(--dropshadow-pressed);
}