@layer template {
    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        position: relative;
        padding: 2.8125vw 0vw;
        border: none;
        border-radius: 3.125vw;
        background: var(--button-background);
        box-shadow: 0 .9375vw 0 0 var(--button-shadow);
        outline: none;
        cursor: pointer;
        transition: all .3s ease
    }

    @media (min-width: 1024px) {
        .button {
            align-self:center;
            padding: 18px 0;
            border-radius: 20px;
            box-shadow: 0 6px 0 0 var(--button-shadow)
        }
    }

    .button:hover,.button:active {
        transform: translateY(1.25vw);
        background: var(--button-background-hover);
        box-shadow: 0 0 0 0 var(--button-shadow)
    }

    @media (min-width: 1024px) {
        .button:hover,.button:active {
            transform:translateY(8px)
        }
    }

    .button.button--bottom .label {
        flex-direction: column
    }

    .button.button--bottom .label .button__inner {
        margin-top: .625vw
    }

    @media (min-width: 1024px) {
        .button.button--bottom .label .button__inner {
            margin-top:4px
        }
    }

    .button.button--bottom .label .button__inner .button__image {
        width: 2.5vw
    }

    @media (min-width: 1024px) {
        .button.button--bottom .label .button__inner .button__image {
            width:16px
        }
    }

    .button.button--right .label .button__inner {
        position: relative;
        padding-left: 2.8125vw
    }

    @media (min-width: 1024px) {
        .button.button--right .label .button__inner {
            padding-left:18px
        }
    }

    .button.button--right .label .button__inner .button__image {
        width: 3.125vw
    }

    @media (min-width: 1024px) {
        .button.button--right .label .button__inner .button__image {
            width:20px
        }
    }

    .button.button--border .label .button__inner {
        margin-left: 2.8125vw
    }

    @media (min-width: 1024px) {
        .button.button--border .label .button__inner {
            margin-left:18px
        }
    }

    .button.button--border .label .button__inner:before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        height: 100%;
        background: #ffffff
    }

    .button .label {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        opacity: 1;
        transition: all .2s ease
    }

    .button .label .button__inner {
        display: flex;
        flex-direction: row;
        align-items: center
    }

    .button .label .button__inner .button__image+.button__subtext {
        margin-left: 12px
    }

    .button .label>*:not(.loader) {
        width: 100%
    }

    .button .button__text {
        width: 100%
    }

    @media (max-width: 1023px) {
        .container .button {
            align-self:initial
        }
    }
}

.button[data-v-fa759aa3] {
    --button-background: var(--b2b52032);
    --button-background-hover: var(--f41376d4);
    --button-shadow: var(--8a4d56a4)
}