/* Override .btn from bootstrap */
.btn,
button:not(.mini-form-submit) {
    border-radius: 900px;
    background-color: var(--bbx-locales-primary-color);
    color: #FFFFFF;
    padding: 10px 20px !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    transition: all .3s ease;
    border: 3px solid var(--bbx-locales-primary-color);
}

.btn.primary-color {
    background-color: var(--bbx-locales-primary-color);
    border-color: var(--bbx-locales-primary-color);
}

.btn.secondary-color {
    background-color: var(--bbx-locales-secondary-color);
    border-color: var(--bbx-locales-secondary-color);
    color: var(--bbx-locales-grey-text);
}

.btn.secondary-color:hover,
.btn.secondary-color:focus {
    color: var(--bbx-locales-grey-text);
}

.btn:hover,
.btn:focus,
button:hover,
button:focus {
    color: #FFFFFF;
    box-shadow: 0 0 0 .25rem var(--bbx-locales-primary-color-shadow) !important;
}

.btn.squared {
    border-radius: 8px;
}

.btn.full-size {
    width: 100%;
}

.btn.white {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--bbx-locales-primary-color);
}

.btn.outline {
    background-color: #FFFFFF;
    border-color: var(--bbx-locales-secondary-color);
    color: #000000;
}

.btn.outline-primary {
    background-color: #FFFFFF;
    border-color: var(--bbx-locales-primary-color);
    color: var(--bbx-locales-primary-color);
}

@media screen and (min-width: 992px) {
    .btn.icon-after::after {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        position: relative;
        left: 5px;
        top: 0;
        transition: all .3s ease;
    }

    .btn.icon-after.arrow-right:hover::after,
    .btn.icon-after.arrow-right:focus::after {
        left: 10px;
    }

    .btn.icon-after.arrow-down:hover::after,
    .btn.icon-after.arrow-down:focus::after {
        top: 5px;
    }

    .btn.icon-after.arrow-up:hover::after,
    .btn.icon-after.arrow-up:focus::after {
        top: -5px;
    }

    .btn.icon-after.arrow-right::after {
        content: "\f061";
    }

    .btn.icon-after.arrow-down::after {
        content: "\f063";
    }

    .btn.icon-after.arrow-up::after {
        content: "\f062";
    }
}