@import "general.css";

/* Both Close and Open */
.section{
    padding: var(--mb-1);
    margin: var(--mb-1);
    background-color: var(--container-color);
    transition: all .5s ease;
}

.section h2{
    color: var(--text-color);
    padding-bottom: var(--mb-0-75);
    margin-bottom: var(--mb-0-5);
    border-bottom: var(--border-width-bold) solid var(--container-color-dark);
    transition: all .5s ease;
}

.section:hover{
    border-radius: var(--border-radius);
    box-shadow: 3px 3px 6px var(--text-color);
    transition: all .5s ease;
}

.unity-btn{
    color: var(--text-color-light);
    padding: var(--mb-1);
    border: none;
    transition: all .2s ease;
}

.unity-btn-close{
    background-color: var(--container-color-dark);
}

.unity-btn-open{
    background-color: var(--minor-color-second);
}

.unity-btn:hover{
    border-radius: var(--border-radius);
    transition: all .2s ease;
}

.unity-btn-close:hover{
    background-color: var(--body-color);
    border: var(--border-width-bold) solid var(--container-color-dark);
    color: var(--text-color);
}

.unity-btn-open:hover{
    background-color: var(--minor-color);
    border: var(--border-width-bold) solid var(--text-color-light);
    color: var(--text-color-light);
}

/* Unity Canvas Close */
.grid-unity-close .unity-list{
    display: flex;
    flex-direction: row;
    transition: all .5s ease;
}

/* Unity Canvas Open */
.grid-unity-open .section{
    padding: var(--mb-1) var(--mb-0-5);
    margin: var(--mb-0-5) 0;
    transition: all .5s ease;
}

.grid-unity-open .unity-list{
    display: flex;
    flex-direction: column;
    transition: all .5s ease;
}

.grid-unity-open .section h2{
    font-size: var(--body-font);
    transition: all .5s ease;
}

.grid-unity-open .section button{
    padding: var(--mb-0-5) 0;
    transition: all .2s ease;
}