@import "../assets/styles/bootstrap/variables";

.drawer {
    width: 220px;
    background: var(--theme-background);
    overflow: hidden;
    color: white;
    flex: 0 0 220px;
    transform: translateX(0px);
    transition: transform 0.1s ease 0s;
    text-align: right;

    .pagemenu-action{
        font-size: 12px;
        font-weight: normal;
        padding-left: 10px;
        width: 200px;
    }

    .pagemenu-title {
        padding: 0;
        
        h4{
            font-size: 17px;
            line-height: 27px;
            padding-top: 18px;
            padding-bottom: 14px;
            display: block;
            margin: 0;
            font-weight: 400;

            a{
                cursor: pointer;
                color: white;
            }
        }
    }

    .menu-disabled{
        .pagemenu-title {
            h4{
                color: $theme-background-light;
                a{
                    color: $theme-background-light;
                }
            }
        }
    }

    .pagemenu-header {
        opacity: 1;
        transform: translateX(0);
        transition: transform ease-in-out .2s, opacity ease-in-out .2s;
    }

    .pagemenu-body {
        padding: 0;
        width: 220px;
        padding-left: 10px;

        opacity: 1;
        transform: translateX(0);
        transition: transform ease-in-out .2s .02s, opacity ease-in-out .2s .02s;
    }

    .pagemenu-header {
        background-color: transparent;
        height: 60px;
        width: 210px;
        padding-left: 10px;

        opacity: 1;
        transform: translateX(0);
        transition: transform ease-in-out .2s, opacity ease-in-out .2s;
    }

    a{
        color: var(--theme-background-light);
        transition: color ease-in-out .1s;
        text-decoration: none;
        outline:0;    

        &:hover, &:focus, &.active{
            color: white;
            text-decoration: none;
        }

        &[disabled]{
            cursor: not-allowed;

            &:hover, &:focus, &.active{
                color: var(--theme-background-light);
            }
        }
    }

    .pagemenu-actiontitle {
        min-width: 0;
    }

    .pagemenu-actionicon {
        padding-left: 8px;
        padding-right: 0px;
        font-size: 9pt;
        line-height: 20px;
    }

    .side-pages{
        width: 220px;
        padding-left: 10px;
        padding-top: 20px;

        & > .menu-action{
            border-right: 4px solid $gray-darker;

            &.active, &:hover.active{
                border-color: $theme-primary;
                & > a{
                    .pagemenu-action {
                        color: white;
                    }
                }
            }

            &:hover{
                border-color: $gray;
                & > a{
                    .pagemenu-action {
                        color: $gray-lighter;
                    }
                }
            }

            .menu-action-children{
                display: none;
            }

            &.active{
                .menu-action-children{
                    display: block;
                }
            }

            &:first-child{
                & > a{
                    .pagemenu-action {
                        font-size: 17px;
                        padding-left: 0;

                        i{
                            font-size: 20px;
                        }
                    }
                }
            }

            & > a{
                .pagemenu-action {
                    width: 100%;
                    padding: 10px;
                    font-weight: normal;
                    display: flex;
                    flex-direction: row-reverse;
                    align-items: center;

                    i{
                        font-size: 14px;
                        padding-right: 0;
                        padding-left: 5px;
                    }
                }
            }
        }
    }

}

.scaffold.collapsed .drawer{
	transform: translateX(-250px);
	width:0px;
	overflow: hidden;

    .pagemenu-body, .pagemenu-header {
        opacity: 0;
        transform: translateX(-30px);
    }
}