@use '../../styles/variables.scss';

@mixin menu-theme-loose {
    &.thy-menu-theme-loose {
        padding: 0px 12px;
        .thy-menu-item,
        .thy-menu-item-content {
            min-height: 36px;
        }
        .thy-menu-item {
            padding: 0;
            margin-bottom: 12px;
        }
        .thy-menu-item-content {
            margin: 0;
            padding: variables.$menu-loose-item-padding;
            border-radius: variables.$menu-loose-item-border-radius;
        }
        .thy-menu-group {
            .thy-menu-group-header {
                margin: 0;
                height: 48px;
                padding: 0 8px;
                .thy-menu-group-title {
                    padding-left: 0;
                    color: variables.$gray-600;
                }
            }
            .thy-menu-group-arrow {
                margin-right: 2px;
            }
            .thy-menu-group-body {
                margin: 0;
            }
        }
        .thy-divider.thy-divider-horizontal {
            margin: 0;
        }
        .thy-divider.thy-divider-horizontal + .thy-menu-item {
            margin-top: 12px;
        }
    }
}

@mixin menu-theme-dark {
    &.thy-menu-theme-dark {
        color: variables.$menu-theme-dark-color;
        background: variables.$menu-theme-dark-bg-color;

        .thy-menu-item {
            &.active {
                .thy-menu-item-content {
                    background: variables.$menu-theme-dark-hover-bg-color;

                    .thy-menu-item-icon {
                        color: variables.$menu-theme-dark-hover-color;
                    }

                    .thy-menu-item-name {
                        color: variables.$menu-theme-dark-hover-color;
                    }
                }
            }

            .thy-menu-item-content {
                &:hover {
                    background: variables.$menu-theme-dark-hover-bg-color;
                }

                .thy-menu-item-icon {
                    color: variables.$menu-theme-dark-icon-color;
                }

                .thy-menu-item-name {
                    color: variables.$menu-theme-dark-color;
                }
            }
        }

        .thy-menu-group {
            .thy-menu-group-header {
                &:hover {
                    background: variables.$menu-theme-dark-hover-bg-color;
                    .thy-menu-group-title {
                        color: variables.$menu-theme-dark-hover-color;
                    }
                }

                .thy-menu-group-arrow {
                    color: variables.$menu-theme-dark-icon-color;
                }

                .thy-menu-group-title-icon {
                    color: variables.$menu-theme-dark-icon-color;
                }

                .thy-menu-group-operation {
                    color: variables.$menu-theme-dark-icon-color;
                }
            }
        }

        .thy-divider.thy-divider-horizontal {
            border-color: variables.$menu-theme-dark-divider-color;
        }
    }
}
