@import '../../mixin/set-background-color';
@import '../../variables';

.sz-menu {
    display: block;
    font-size: $font-size;
    background-color: $color-grey-100-light;

    .sz-menu-ul-container {
        list-style-type: none;
        padding-inline-start: 0;
        margin-block-start: 0;
        margin-block-end: 0;
        margin: 0;
        padding: 0;
    }

    .sz-menu-li {
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .sz-menu-item-div {
        display: flex;
        align-items: center;

        &:hover {
            background-color: $color-grey-100;
        }
    }

    .sz-menu-ul {
        list-style-type: none;
        padding-inline-start: 8px;
        margin-block-start: 0;
        margin-block-end: 0;
        overflow: hidden;
        //max-height: 0; => from '.ts'
        transition: max-height $transition-speed;
    }

    .sz-arrow-icon {
        margin-right: 10px;
        transform: rotate(0deg);
        transition: transform $transition-speed;
    }

    .sz-arrow-icon-opened {
        transform: rotate(-90deg);
        transition: transform $transition-speed;
    }

    .sz-link-icon {
        flex: 1;

        .sz-link-icon-container {
            padding: $padding-size;
        }
    }

    .sz-menu-item-div-selected {
        background-color: $color-grey-100;

        .sz-link-icon {
            .sz-link-icon-container {
                color: $color-blue-a700;
            }
        }
    }
}