@use '../../../../styles/base/mixin' as mixins;

$side-menu: (
    base: (
        width: 5.5rem,
        margin-top-between-items: 0.75rem,
    ),
    item: (
        width: 3.5rem,
        height: 2rem,
        font-size: 0.75rem,
        text-align: center,
        line-height: 1.1,
    ),
    mobile-item: (
        icon-size: 1.5rem,
        title-font-size: 0.75rem,
        additional-icon-size: 1rem,
    ),
    sub-menu: (
        width: 15rem,
    ),
    sub-menu-item: (
        width: 13.75rem,
        title-font-size: 0.85rem,
    ),
);

:host {
    @each $element, $elements in $side-menu {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('side-menu', #{$element}, #{$style-token})}: #{$value};
        }
    }

    // Hide drawer mask
    --mat-sidenav-scrim-color: transparent;

    .rtui-mobile-side-menu {
        width: var(--rt-side-menu-sub-menu-width);

        .rtui-mobile-side-menu-list {
            display: flex;
            flex-direction: column;
            width: 100%;

            &--scrollable {
                width: fit-content;
            }

            &__sub {
                opacity: 0;
                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
            }

            .rtui-mobile-side-menu-list-main {
                opacity: 0;
                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;

                .rtui-mobile-side-menu-item {
                    &__icon {
                        width: var(--rt-side-menu-mobile-item-icon-size);
                        height: var(--rt-side-menu-mobile-item-icon-size);
                        font-size: var(--rt-side-menu-mobile-item-icon-size);
                    }

                    .rtui-mobile-side-menu-item-title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        &__text {
                            font-size: 0.75rem;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }

                        .rtui-mobile-side-menu-item-title-button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-left: 0.5rem;
                            border-radius: 50%;

                            &__icon {
                                width: var(--rt-side-menu-mobile-item-additional-icon-size);
                                height: var(--rt-side-menu-mobile-item-additional-icon-size);
                                font-size: var(--rt-side-menu-mobile-item-additional-icon-size);
                            }
                        }
                    }
                }

                .rtui-mobile-side-menu-item + .rtui-mobile-side-menu-item {
                    margin-top: 0.5rem;
                }
            }
        }
    }

    .rtui-side-menu {
        width: var(--rt-side-menu-base-width);

        &__list {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;

            .rtui-side-menu-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                width: 100%;

                .rtui-side-menu-item-button {
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: var(--rt-side-menu-item-height);
                    width: var(--rt-side-menu-item-width);

                    &__icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                &__title {
                    font-size: var(--rt-side-menu-item-font-size);
                    text-align: var(--rt-side-menu-item-text-align);
                    line-height: var(--rt-side-menu-item-line-height);
                }
            }

            .rtui-side-menu-item + .rtui-side-menu-item {
                margin-top: var(--rt-side-menu-base-margin-top-between-items);
            }
        }
    }

    .rtui-sub-side-menu {
        position: fixed;
        top: 0;
        left: var(--rt-side-menu-base-width);
        width: 0;
        height: 100%;
        background-color: transparent;

        &--opened {
            width: 100%;
        }

        .rtui-sub-side-menu-content {
            width: var(--rt-side-menu-sub-menu-width);
            height: 100%;
            border-left: 1px solid var(--clr-black-20);
            box-shadow:
                14px 0 28px rgba(0, 0, 0, 0.25),
                10px 0 10px rgba(0, 0, 0, 0.22);

            &__list {
                width: 100%;

                opacity: 0;
                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;

                &--scrollable {
                    min-width: fit-content;
                }
            }
        }
    }
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}