:root {
    --btn-primary-bg-normal: var(--brand-prussian-blue);
    --btn-primary-border-normal: var(--brand-prussian-blue);
    --btn-primary-text-color-normal: #ffffff;
    --btn-primary-bg-hover: var(--brand-prussian-blue-secondary);
    --btn-primary-border-hover: var(--brand-prussian-blue-secondary);
    --btn-primary-text-color-hover: #ffffff;
    --btn-secondary-bg-normal: #ffffff;
    --btn-secondary-border-normal: var(--brand-prussian-blue);
    --btn-secondary-text-color-normal: var(--brand-prussian-blue);
    --btn-secondary-bg-hover: #ffffff;
    --btn-secondary-border-hover: var(--brand-prussian-blue-secondary);
    --btn-secondary-text-color-hover: var(--brand-prussian-blue-secondary);
    --btn-ternary-bg-normal: transparent;
    --btn-ternary-border-normal: var(--brand-prussian-blue-secondary);
    --btn-ternary-text-color-normal: var(--brand-prussian-blue-secondary);
    --btn-ternary-bg-hover: transparent;
    --btn-ternary-border-hover: var(--brand-prussian-blue);
    --btn-ternary-text-color-hover: var(--brand-prussian-blue);
    --btn-light-bg-normal: hsl(0deg 0% 100% / 25%);
    --btn-light-border-normal: transparent;
    --btn-light-text-color-normal: #fff;
    --btn-light-bg-hover: hsl(0deg 0% 100% / 35%);
    --btn-light-border-hover: transparent;
    --btn-light-text-color-hover: #fff;
    --btn-min-height: 2rem;
    --btn-border-radius: var(--global-border-radius);
    --btn-transition-duration: 200ms;
    --btn-transition: background var(--btn-transition-duration) linear, border var(--btn-transition-duration) linear, color var(--btn-transition-duration) linear, box-shadow var(--btn-transition-duration) linear;
    --btn-fsize: var(--fs-sm-2);
    --btn-pt: 1rem;
    --btn-pb: 1rem;
    --btn-pl: 2rem;
    --btn-pr: 2rem;
    --btn-box-shadow: none;
    --btn-ffamily: var(--ffamily-subtitle);
    --btn-fweight: 600;
    --btn-ls: .15em;
    --btn-lh: .9em;
    --btn-display: inline-block;
    --btn-border-width: var(--line-sm);
    --btn-text-transform: uppercase;
    --btn-border-style: solid;
}

@media (min-width:992px) {
    :root {
        --btn-fsize: var(--fs-sm-1);
    }
}

@media (min-width:1200px) {
    :root {
        --btn-fsize: var(--fs-sm-2);
    }
}

:is(.btn, .button):is(*, button, input[type=submit]) {
    --user-select: none;
    --box-shadow: none;
    --text-overflow: ellipsis;
    display: var(--btn-display);
    line-height: var(--btn-lh);
    padding-top: var(--btn-pt);
    padding-bottom: var(--btn-pb);
    padding-left: var(--btn-pl);
    padding-right: var(--btn-pr);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-border-radius);
    -webkit-user-select: var(--user-select) !important;
    -moz-user-select: var(--user-select) !important;
    -ms-user-select: var(--user-select) !important;
    user-select: var(--user-select) !important;
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-ls);
    font-size: var(--btn-fsize);
    font-weight: var(--btn-fweight);
    text-align: center;
    font-family: var(--btn-ffamily);
    -webkit-box-shadow: var(--box-shadow) !important;
    box-shadow: var(--box-shadow) !important;
    -webkit-transition: var(--btn-transition);
    -o-transition: var(--btn-transition);
    transition: var(--btn-transition);
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: var(--text-overflow);
    text-overflow: var(--text-overflow);
}

:is(.btn-primary, .btn-dark, .button):is(*, button, input[type=submit]) {
    border-color: var(--btn-primary-border-normal);
    color: var(--btn-primary-text-color-normal);
    background-color: var(--btn-primary-bg-normal);
}

:is(.btn-primary, .btn-dark, .button):is(.active, .show, :is(button, input[type=submit]):hover, :is(:hover, :active, :focus, :focus-visible, :first-child:active)) {
    border-color: var(--btn-primary-border-hover);
    color: var(--btn-primary-text-color-hover);
    background-color: var(--btn-primary-bg-hover);
}

:is(.btn-light):is(*, button, input[type=submit]) {
    --backdrop-filter: blur(.1rem);
    border-color: var(--btn-light-border-normal);
    color: var(--btn-light-text-color-normal);
    background-color: var(--btn-light-bg-normal);
    -webkit-backdrop-filter: var(--backdrop-filter);
    backdrop-filter: var(--backdrop-filter);
}

:is(.btn-light):is(*, button, input[type=submit]):is(:hover, :active, :focus, :focus-visible) {
    border-color: var(--btn-light-border-hover);
    color: var(--btn-light-text-color-hover);
    background-color: var(--btn-light-bg-hover);
}

:is(.btn-secondary):is(*, button, input[type=submit]) {
    color: var(--btn-secondary-text-color-normal);
    border-style: none;
}

:is(.btn-secondary):is(*, button, input[type=submit]):is(:hover, :active, :focus, :focus-visible) {
    color: var(--btn-secondary-text-color-hover);
    border-style: none;
}

:is(.btn-ternary):is(*, button, input[type=submit]) {
    border-color: var(--btn-ternary-border-normal);
    color: var(--btn-ternary-text-color-normal);
    background-color: var(--btn-ternary-bg-normal);
}

:is(.btn-ternary):is(*, button, input[type=submit]):is(:hover, :active, :focus, :focus-visible) {
    border-color: var(--btn-ternary-border-hover);
    color: var(--btn-ternary-text-color-hover);
    background-color: var(--btn-ternary-bg-hover);
}