@side-menu-item-border: none;
@side-menu-item-active-border-width: 4px;
@side-menu-item-padding: 18px;
@side-menu-item-icon-size: 16px;
@side-menu-item-icon-right-gap: 15px;
@side-menu-menu-border-width: 2px;
@side-menu-menu-border: @side-menu-menu-border-width solid @bg-web;
@side-menu-transition-duration: 250ms 150ms;

.side-menu {
    .reset-ul();
    width: @width-panel;
    margin-bottom: 50px;

    transition: width @side-menu-transition-duration;

    &--collapsed {
        position: relative;
        overflow: hidden;
        z-index: 1;
        width: @width-panel-small;

        border-right: @side-menu-menu-border;

        & .side-menu__item__text {
            display: inline-block;
            transform: scaleX(0);
            transform-origin: left;

            transition: transform @side-menu-transition-duration;
        }

        &:hover {
            width: @width-panel;

            & .side-menu__item__text {
                transform: scaleX(1);
            }
        }
    }

    &--detail {
        display: block;
        position: absolute;
        top: 0;
        left: calc(~"@{width-panel-small} - @{side-menu-menu-border-width}");
        width: calc(~"@{width-panel} - @{width-panel-small}");
        opacity: 1;

        border-left: @side-menu-menu-border;
        transition: opacity @side-menu-transition-duration;

        .side-menu--collapsed:hover ~ & {
            opacity: 0;
        }

        & .side-menu__item {
            white-space: normal;

            &__link {
                padding: 10px;
            }
        }
    }

    &__item {
        display: block;
        white-space: nowrap;

        border-bottom: @side-menu-item-border;

        &:last-child {
            margin-bottom: @input-height + 4px;
        }

        &--superadmin {
            background: lighten(@color-red, 53%);
        }

        &--collapse {
            display: none;

            @media @query-lg {
                display: block;

                .side-menu__item__link {
                    font-weight: 400;
                }

                .menu-collapsed & {
                    .svg {
                        transform: rotate(180deg);
                        margin-right: 20px;
                    }
                }
            }
        }

        &__link, &__label {
            display: block;
            position: relative;
            padding: 15px 18px;

            background-color: @color-f;
            color: @color-base;
            font-family: @font;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;

            .side-menu__submenu & {
                font-size: 14px;
            }

            .side-menu__item--superadmin & {
                border-left-color: @color-red;
                color: @color-red;
            }

            .svg {
                position: relative;
                top: 0;
                margin-right: @side-menu-item-icon-right-gap + 1;

                color: @color-darklink;
                font-size: @side-menu-item-icon-size;
                text-decoration: none;
            }

            .side-menu__item--active & {
                padding-left: calc(~"@{side-menu-item-padding} - @{side-menu-item-active-border-width}");

                background-color: @color-grey-light;
                border-left: @side-menu-item-active-border-width solid @color-blue;
                color: @color-link;
                font-weight: 600;

                .svg {
                    color: @color-link;
                }
            }

            &__icon {
                position: relative;
                top: -1px;
                float: left;
                margin-right: 5px;

                color: @color-move;
                font-weight: 400;
            }
        }

        &__link {
            cursor: pointer;

            &:hover {
                color: @color-primary;
                text-decoration: underline;

                .svg {
                    color: @color-primary;
                }
            }

            .side-menu__item--active & {

                &:hover {
                    color: @color-link-hover;
                }
            }
        }
    }

    &__submenu {
        .reset-ul();

        width: @width-panel;
        white-space: normal;

        .open:not(.side-menu__item--active) &, .side-menu--collapsed .side-menu__item--active > & {
            .animated(0.1s, 0s);
            .fadeIn-scale-topLeft;
        }

        &.hidden {
            display: none;
        }

        &__item {
            display: block;

            &--superadmin {
                background: lighten(@color-red, 53%);
            }

            &__link, &__label {
                display: block;
                position: relative;
                padding: @side-menu-item-padding/2;
                padding-left: calc(~"@{side-menu-item-icon-size} + @{side-menu-item-padding} + @{side-menu-item-icon-right-gap}");

                color: @color-darklink;
                font-size: 14px;
                font-weight: 400;
                text-decoration: none;

                .side-menu__item--superadmin & {
                    border-left-color: @color-red;
                }

                .side-menu__submenu__item--active > & {
                    color: @color-link;
                    font-weight: 500;
                }

                .side-menu__submenu__item--superadmin & {
                    color: @color-red;
                }

                .side-menu__submenu__item:last-child & {
                    padding-bottom: 15px;
                }

                .side-menu__submenu--level2 & {
                    display: flex;
                    padding-top: 4px;
                    padding-bottom: 4px;

                    font-size: 12px;

                    .svg {
                        margin-right: 5px;
                    }
                }

                .side-menu__submenu--level2 .side-menu__submenu__item:last-child & {
                    padding-bottom: 10px;
                }

                &:hover {
                    text-decoration: none;
                }
            }

            &__link {
                cursor: pointer;

                &:hover {
                    color: @color-darklink-hover;
                }

                .side-menu__submenu__item--active & {

                    &:hover {
                        color: @color-link-hover;
                    }
                }
            }
        }
    }
}