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

.thy-menu {
    position: relative;
    display: block;
    overflow-x: hidden;

    .thy-menu-item {
        padding: variables.$menu-item-padding;
        min-height: variables.$menu-height;
        align-items: center;

        &.action-active .thy-menu-item-content {
            background: variables.$gray-100;
        }

        &.active .thy-menu-item-content {
            background: rgba(variables.$primary, 0.1);
        }

        .thy-menu-item-content {
            margin: 0 -1000px;
            padding: 0 1000px;
        }

        &.cdk-drag,
        &.thy-sortable-item {
            .cdk-drag-handle,
            .thy-sortable-handle,
            .drag-handle {
                position: absolute;
                left: 3px;
            }
            .thy-menu-item-icon {
                padding-left: 6px;
            }
        }

        &.thy-sortable-ghost,
        &.cdk-drag-placeholder {
            padding: 0 1000px;
            margin: 0 -1000px;
        }
    }

    .thy-menu-group {
        display: block;
        .thy-menu-group-header-content {
            display: flex;
            flex: 1;
            align-items: center;
        }

        &.collapsed {
            .thy-menu-group-header {
                .thy-menu-group-arrow {
                    transform: rotate(90deg) translateX(-2px);
                }
            }
        }

        .thy-menu-group-header {
            display: flex;
            height: variables.$menu-height;
            align-items: center;
            font-size: variables.$font-size-sm;
            margin: 0 -1000px;
            padding: variables.$menu-group-header-padding;
            &.thy-menu-group-collapsible {
                cursor: variables.$hand-cursor;
            }

            &:hover {
                &.thy-menu-group-collapsible {
                    .thy-menu-group-title {
                        color: variables.$primary;
                    }
                }

                .thy-menu-group-operation {
                    visibility: visible;
                }
            }

            .thy-menu-group-arrow {
                transition: all 0.2s cubic-bezier(0.4, 0.1, 0.5, 1) 0.1s;
                display: inline-block;
                color: variables.$gray-600;
                font-size: variables.$font-size-md;
                width: 12px;
            }

            .thy-menu-group-title-icon {
                color: variables.$gray-600;
            }

            .thy-menu-group-title {
                flex-grow: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .thy-menu-group-operation {
                visibility: hidden;
                color: variables.$gray-600;
            }
        }

        .thy-menu-group-body {
            margin-left: variables.$menu-group-margin-left;
        }

        &.has-icon {
            .thy-menu-group-title-text {
                font-size: variables.$font-size-base;
            }
        }
    }

    .thy-divider.thy-divider-horizontal {
        margin: 8px 0px;
    }
}

.thy-menu-item {
    display: block;

    &.active {
        text-decoration: none;
    }

    &:hover {
        text-decoration: none;
    }

    .thy-menu-item-content {
        display: flex;
        min-height: variables.$menu-height;
        cursor: variables.$hand-cursor;
        overflow: hidden;
        align-items: center;

        &:hover {
            background: variables.$gray-100;
            .thy-menu-item-action {
                display: inline-block;
                margin-left: 4px;
            }
        }

        .thy-menu-item-icon {
            color: variables.$gray-600;
            padding-right: 8px;
        }

        .thy-menu-item-name {
            flex-grow: 1;
            color: variables.$gray-800;
            font-size: variables.$font-size-base;
        }

        .thy-menu-item-name-ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .thy-menu-item-action {
            display: none;
            color: variables.$gray-600;
            .thy-action:last-child {
                margin-right: -8px;
            }

            &.active {
                display: inline-block !important;
                margin-left: 4px;
                .thy-action {
                    background: rgba(variables.$primary, 0.1);
                    color: variables.$primary;
                }
            }
        }
    }

    &.active .thy-menu-item-content {
        .thy-menu-item-icon {
            color: variables.$primary;
        }

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

.thy-menu {
    @include theme.menu-theme-loose();
    @include theme.menu-theme-dark();
    @include collapsed.menu-collapsed();
}
