@import '../utilities/utilities.scss';

.azui {
    &.azLayout {
        display: grid;
        grid-template-areas: "n n n""w c e""s s s";
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr auto;
        position: relative;

        &>.azLayoutArea {
            overflow: hidden;
            box-sizing: border-box;

            &>div {
                // overflow: auto;
                width: 100%;
                height: 100%;
                // position: absolute;
            }

            // & .azDraggable.handle {
            //     background: #36383f;
            // }

            &.azLayoutAreaNorth {
                grid-area: n;
                padding-bottom: $collapseIconSize;
            }

            &.azLayoutAreaEast {
                grid-area: e;
                padding-left: $collapseIconSize;
            }

            &.azLayoutAreaSouth {
                grid-area: s;
                padding-top: $collapseIconSize;
            }

            &.azLayoutAreaWest {
                grid-area: w;
                padding-right: $collapseIconSize;
            }

            &.azLayoutAreaCenter {
                position: relative;
                grid-area: c;
            }
        }
    }
}