/*
CodedBy C.ArdaAkin with PhpStorm
 * Date: 25.09.2024
 * Time: 11:28
*/
.sg-button{
    padding: 5px 30px;
    border-radius: calc(var(--radius) + 8px);
    min-height: 50px;
    color: var(--pagefont_clr);
    outline: none !important;
    box-shadow: 0 0 20px transparent;
    transition: all 0.1s ease-in-out;
    display: inline-flex;
    align-items: center;
    border: none;
}
.sg-button:hover{
    border: none;
    box-shadow: none !important;
}
.sg-button:visited{
    filter: grayscale(1);
}
.sg-button.btn-primary{
    background: var(--clr_promo_1);
    border-color: var(--clr_promo_1a) !important;
    color: WHITE;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
    background: var(--clr_promo_1b);
    box-shadow: 0 0 20px transparent;
    outline: none !important;
}

.sg-button.btn-primary:hover,
.sg-button.btn-primary:focus,
.sg-button.btn-primary::-moz-focus-outer,
.sg-button.btn-primary:active {
    background: RED;
}

.sg-button.btn-warning{
    background: var(--clr_promo_3);
    border-color: var(--clr_promo_3a) !important;
    color: WHITE;
}
.sg-button.btn-warning:hover{
    background: var(--clr_promo_3b);
}

.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle{
    background: var(--clr_promo_3b);
}
.sg-button.btn-danger{
    background: var(--clr_promo_6);
    border-color: var(--clr_promo_6a) !important;
    color: WHITE;
}
.sg-button.btn-danger:hover{
    background: var(--clr_promo_6b);
}

.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show>.btn-danger.dropdown-toggle{
    background: var(--clr_promo_6b);
}

.sg-button.btn-success{
    background: var(--clr_promo_4);
    border-color: var(--clr_promo_4a) !important;
    color: WHITE;
}
.sg-button.btn-success:hover{
    background: var(--clr_promo_4b);
}
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle{
    background: var(--clr_promo_4b);
}

.sg-button.btn-info{
    background: var(--clr_promo_5b);
    border-color: var(--clr_promo_5b) !important;
    color: WHITE;
    float: right;
    display: none;
}


.sg-button.btn-dark{
    background: var(--clr_dark_n);
    border-color: var(--clr_dark_n) !important;
    color: WHITE;
}
.sg-button.btn-dark:hover{
    background: var(--clr_dark_p);
}


.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active,
.show>.btn-dark.dropdown-toggle{
    background: var(--clr_dark_p);
}


.sg-button.btn-info{
    color: WHITE;
}

.sg-button.btn-frame{
    background: transparent;
    border: 1px solid var(--clr_promo_1b);
    color: var(--clr_promo_1b) !important;
}
.sg-button.btn-frame.btn-primary{
    background: transparent;
    border: 1px solid var(--clr_promo_1b);
    color: var(--clr_promo_1b) !important;
}
.sg-button.btn-frame.btn-primary:active,
.sg-button.btn-frame.btn-primary:hover,
.sg-button.btn-frame.btn-primary:focus{
    background: var(--clr_promo_1b);
    color: WHITE !important;
}


.sg-button.btn-frame.btn-danger{
    background: transparent;
    border: 1px solid var(--clr_promo_6);
    color: var(--clr_promo_6) !important;
}
.sg-button.btn-frame.btn-success{
    background: transparent;
    border: 1px solid var(--clr_promo_4);
    color: var(--clr_promo_4) !important;
}
.sg-button.btn-frame.btn-success:active,
.sg-button.btn-frame.btn-success:hover,
.sg-button.btn-frame.btn-success:focus{
    background: var(--clr_promo_4);
    color: WHITE !important;
}

.sg-button.btn-frame.btn-info{
    background: transparent;
    border: 1px solid var(--clr_promo_2);
    color: var(--clr_promo_2) !important;
}
.sg-button.btn-frame.btn-info:active,
.sg-button.btn-frame.btn-info:hover,
.sg-button.btn-frame.btn-info:focus{
    background: var(--clr_promo_2);
    color: WHITE !important;
}

.sg-button.btn-frame.btn-dark{
    background: transparent;
    border: 1px solid var(--clr_dark_n);
    color: var(--clr_dark_n) !important;
}
.sg-button.btn-frame.btn-dark:active,
.sg-button.btn-frame.btn-dark:hover,
.sg-button.btn-frame.btn-dark:focus{
    background: var(--clr_dark_n);
    color: WHITE !important;
}



.sg-button.icon-button{
    padding-left: 40px;
    position: relative;
}
.sg-button.icon-button i{
    position: absolute;
    left: 0;
    width: 35px;
    height: 100%;
    display: flex;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    align-items: center;
    justify-content: center;
}