/* ==========================================================
   Demo Bonsai
   theme.css
   Shadow - Hover - Animation - Effects
========================================================== */


/*==========================================================
    TRANSITION
==========================================================*/

button,
.btn,
.tool,
.tab,
.thumb,
.flag-btn,
a{

    transition:
        background .20s ease,
        color .20s ease,
        border-color .20s ease,
        transform .18s ease,
        box-shadow .22s ease,
        opacity .18s ease;

}


/*==========================================================
    HOVER
==========================================================*/

.btn:hover,
.tool:hover,
.tab:hover,
.thumb:hover,
.flag-btn:hover{

    transform:translateY(-2px);

}


.thumb:hover{

    transform:scale(1.04);

}


.btn:active,
.tool:active,
.tab:active,
.thumb:active{

    transform:scale(.96);

}


/*==========================================================
    SHADOW
==========================================================*/

.shadow{

    box-shadow:
        0 8px 24px rgba(0,0,0,.12);

}


.shadow-sm{

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

}


.shadow-lg{

    box-shadow:
        0 12px 36px rgba(0,0,0,.20);

}


/*==========================================================
    BUTTON EFFECT
==========================================================*/

.btn{

    box-shadow:
        0 3px 8px rgba(0,0,0,.08);

}


.btn:hover{

    box-shadow:
        0 10px 22px rgba(0,0,0,.16);

}


.btn:active{

    box-shadow:
        0 3px 8px rgba(0,0,0,.10);

}


/*==========================================================
    TAB EFFECT
==========================================================*/

.tab{

    box-shadow:
        0 6px 16px rgba(0,0,0,.08);

}


.tab.active{

    border-color:#2da44e;

    color:#198754;

    box-shadow:
        0 8px 18px rgba(0,0,0,.14);

}


/*==========================================================
    THUMB EFFECT
==========================================================*/

.thumb{

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

}


.thumb.active{

    border:2px solid #2da44e;

    box-shadow:
        0 10px 24px rgba(0,0,0,.18);

}


/*==========================================================
    TOOLBAR ICON
==========================================================*/

.tool img{

    filter:
        drop-shadow(
            0 2px 4px rgba(0,0,0,.35)
        );

}


.tool-icon{

    filter:
        drop-shadow(
            0 2px 4px rgba(0,0,0,.25)
        );

}


.tool-icon-big{

    filter:
        drop-shadow(
            0 2px 6px rgba(0,0,0,.30)
        );

}


/*==========================================================
    FLAG EFFECT
==========================================================*/

.flag-btn:hover{

    transform:scale(1.10);

}


.flag-btn.active{

    box-shadow:
        0 0 0 2px #ff2b2b;

}


/*==========================================================
    MASK PANEL
==========================================================*/

#mask-size-panel{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:none;

    align-items:center;

    gap:10px;

    padding:10px 14px;

    border-radius:18px;

    background:rgba(35,35,35,.92);

    color:#fff;

    z-index:1000;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

    backdrop-filter:blur(10px);

}


#mask-size{

    cursor:pointer;

}


#mask-size-panel.show{

    display:flex;

}


/*==========================================================
    FADE
==========================================================*/

.fade-in{

    animation:fadeIn .25s ease;

}


@keyframes fadeIn{

from{

    opacity:0;

}

to{

    opacity:1;

}

}


/*==========================================================
    SCALE
==========================================================*/

.scale-in{

    animation:scaleIn .18s ease;

}


@keyframes scaleIn{

from{

    opacity:0;

    transform:scale(.94);

}

to{

    opacity:1;

    transform:scale(1);

}

}


/*==========================================================
    SPIN
==========================================================*/

.spin{

    animation:spin 1s linear infinite;

}


@keyframes spin{

to{

    transform:rotate(360deg);

}

}


/*==========================================================
    DISABLED
==========================================================*/

.disabled{

    opacity:.45;

    pointer-events:none;

}