/* ======================= CORE STYLE */

.mb2-pb-btn {

    // Normal colors
    --mb2-pb-btn-color: #fff;
    --mb2-pb-btn-borcolor: var(--mb2-pb-btn-bgcolor);

    // Hover active colors
    --mb2-pb-btn-hcolor: #fff;
    --mb2-pb-btn-borhcolor: var(--mb2-pb-btn-bghcolor);

    // Icon size
    --mb2-pb-btn-iconsize: 1.38;
    --mb2-pb-btn-gap: .65em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    vertical-align: middle;
    gap: var(--mb2-pb-btn-gap);
    font-weight: var(--mb2-pb-fwmedium);
    padding: var(--mb2-btn-py) var(--mb2-btn-px);
    line-height: $lhheadings;
    color: var(--mb2-pb-btn-color);
    font-size: var(--mb2-btn-fsize);
    background-color: var(--mb2-pb-btn-bgcolor);
    border: solid var(--mb2-btn-bw) var(--mb2-pb-btn-borcolor);
    border-radius: var(--mb2-btn-radius);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;

    /* Add style for svg image */
    svg {
        transition: color .15s ease-in-out;
    }

    path {
        fill: var(--mb2-pb-btn-hcolor);
    }

    &:hover,
    &:focus,
    &:active {
        color: var(--mb2-pb-btn-hcolor);
        background-color: var(--mb2-pb-btn-bghcolor);
        border-color: var(--mb2-pb-btn-borhcolor);

        path {
            fill: var(--mb2-pb-btn-hcolor);
        }
    }

    /* Font weight */
    &.fwlight {
        font-weight: $fwlight;
    }

    &.fwnormal {
        font-weight: $fwnormal;
    }

    &.fwbold {
        font-weight: $fwbold;
    }


    /* Accessibility style */

    &:focus {
        outline: .2rem solid transparent;
    }


    /* ======================= BUTTON ICON AND IMAGE */

    .btn-image,
    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        @include mb2_transform_scale(var(--mb2-pb-btn-iconsize));
        height: auto;
        width: auto;

        svg {
            height: 16px;			
        }
    }

    &.iafter1 {
        .btn-image,
        .btn-icon {
            order: 2;
        }
    }

    


    /* ======================= BORDERED BUTTONS */

    &.btnborder1 {
        --mb2-pb-btn-color: var(--mb2-pb-btn-bgcolor);
        --mb2-pb-btn-borcolor: var(--mb2-pb-btn-bgcolor);

        background-color: transparent;

        &:hover,
        &:focus,
        &:active {
            color: var(--mb2-pb-btn-hcolor);
            background-color: var(--mb2-pb-btn-bghcolor);
            border-color: var(--mb2-pb-btn-borhcolor);
        }
    }

    .dark &.btnborder1.typedefault {
        --mb2-pb-btn-color: #fff;
        --mb2-pb-btn-borcolor: #fff;
    }


    /* ======================= BUTTON TYPES */

    &.typeprimary {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-btn-primarybgcolor); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($btnprimarycolor,6%)}; // Hover active colors
    }

    &.typesecondary {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-btn-btnsecondarycolor); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($btnsecondarycolor,6%)}; // Hover active colors
    }

    &.typesuccess {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-color_success); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($color_success,6%)}; // Hover active colors
    }

    &.typewarning {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-color_warning); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($color_warning,6%)}; // Hover active colors
    }

    &.typeinfo {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-color_info); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($color_info,6%)}; // Hover active colors
    }

    &.typedanger {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-color_danger); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($color_danger,6%)}; // Hover active colors
    }

    &.typeinverse {
        --mb2-pb-btn-bgcolor: var(--mb2-pb-btn-btninversecolor); // Normal colors
        --mb2-pb-btn-bghcolor: #{darken($btninversecolor,6%)}; // Hover active colors
    }

    &.typelink {
        // Normal colors
        --mb2-pb-btn-color: var(--mb2-pb-textcolor);
        --mb2-pb-btn-bgcolor: transparent;
        --mb2-pb-btn-borcolor: transparent;

        // Hover active colors
        --mb2-pb-btn-hcolor: var(--mb2-pb-linkcolor);
        --mb2-pb-btn-bghcolor: transparent;
        --mb2-pb-btn-borhcolor: transparent;

        padding-left: 0;
        padding-right: 0;
        border-left: 0;
        border-right: 0;

        &:after {
            @include mb2_font_bootstrapicons();
            content: '\f285';
            transform: scale(1.38);
        }

        &.isicon1 {
            &:after {
                display: none;
            }
        }
    }

    .dir-rtl & {
        &.typelink {
            &:after {
                content: '\f284';
            }
        }
    }


    /* ======================= BUTTON SIZES */

    &.sizexs,
    &.sizesm {
        --mb2-btn-fsize: #{$fssmall};
    }

    &.sizexs {
        padding: var(--mb2-btn-xs-py) var(--mb2-btn-xs-px);
        --mb2-pb-btn-iconsize: 1.11;
        --mb2-pb-btn-gap: .35em;
    }

    &.sizesm {
        padding: var(--mb2-btn-sm-py) var(--mb2-btn-sm-px);
    }


    @media only screen and (min-width: $wmediumdevice + 1){
        &.sizelg {
            padding: var(--mb2-btn-lg-py) var(--mb2-btn-lg-px);
            font-size: var(--mb2-btn-fsize-lg);
        }
    
        &.sizexlg {
            padding: var(--mb2-btn-xlg-py) var(--mb2-btn-xlg-px);
            font-size: var(--mb2-btn-fsize-xlg);
        }
    }

    .sticky-el & {
        &.sizelg,
        &.sizexlg {
            padding: var(--mb2-btn-py) var(--mb2-btn-px);
            font-size: var(--mb2-btn-fsize);
        }
    }


    /* ======================= ROUNDED BUTTONS */

    &.rounded1 {
        border-radius: 30rem;
    }

    &.rounded-1 {
        border-radius: 0 !important;
    }

    /* ======================= FULL WIDTH BUTTONS */

    &.fw1 {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ======================= CENTER BUTTONS ON MOBILE */

    .mobcenter1 & {
        @media (max-width: $wdmediumdevice) {
            margin-left: 8px !important;
            margin-right: 8px !important;
        }

        @media (max-width: $wsmalldevice) {
            margin-left: 5px !important;
            margin-right: 5px !important;
        }
    }

}



/* ======================== ARROW LINK */

.arrowlink {
        
    --mb2-pb-btn-color: var(--mb2-pb-bxtcolor);
    --mb2-pb-btn-hcolor: var(--mb2-pb-bxtcolor);

    font-weight: var(--mb2-pb-fwbold);
    color: var(--mb2-pb-btn-color);
    display: inline-flex;
    align-items: center;

    &:hover,
    &:focus {
        color: var(--mb2-pb-btn-hcolor);
    }

    &:after {
        @include mb2_font_bootstrapicons();
        content: '\f285';
        margin-left: .28rem;
        font-size: 1.2em;
    }
}

.dir-rtl & {
    .arrowlink {
        &:after {
            content: '\f284';
        }
    }
}