@import '../../../styles/theme/index.less';
@import '../../../styles/antd/tooltip.less';
@import '../../dropdown/style/index.less';

@mi-layout: ~'@{mi-prefix}layout';
@mi-history: ~'@{mi-layout}-route-history';

.@{mi-history} {
    position: fixed;
    top: @mi-header-height + 2rem;
    left: var(--mi-side-width, @mi-side-width);
    width: calc(100% - @mi-side-width);
    .properties(padding-left, 16);
    .properties(padding-right, 16);
    transition: all @mi-anim-duration ease;
    .flex(center, flex-start);
    z-index: @mi-z-index-top;

    &-btn,
    &-menu {
        .properties(width, 32);
        .properties(height, 32);
        background-color: var(--mi-route-history-btn-bg, @mi-route-history-btn-bg);
        .border-radius-circle();
        .flex();
        cursor: pointer;

        &&.disabled {
            cursor: not-allowed;
        }

        .anticon {
            .properties(font-size, 14);
            .properties(width, 32);
            .properties(height, 32);
            .flex();
            color: var(--mi-font, @mi-font);
        }
    }

    &-btn {
        transition: all @mi-anim-duration ease;

        &.disabled,
        &.disabled .anticon {
            cursor: not-allowed;
        }
    }

    &-menu {
        .properties(margin-left, 16);

        &&-btn-disabled {
            .properties(padding-left, 32);
    
            .@{mi-history} {
                &-btn {
                    display: none;
                }
            }
        }
    }

    &-list {
        width: 100%;
        .properties(margin-left, 16);
        .properties(margin-right, 16);
        .flex(center, flex-start);
        position: relative;
        overflow: hidden;
    }

    &-items {
        .flex(center, flex-start);
        position: relative;
        transition: all @mi-anim-duration ease;
    }

    &-item {
        .properties(height, 32);
        .flex();
        .properties(padding-left, 16);
        .properties(padding-right, 24);
        .properties(margin-right);
        .border-radius(32);
        .text-ellipsis();
        .linear-gradient-background();
        color: var(--mi-route-history-item-text, @mi-route-history-item-text);
        transition: all @mi-anim-duration ease;
        cursor: pointer;
        position: relative;

        span {
            .properties(margin-right, 8);
            .properties(font-size, 12);

            &:last-child {
                margin-right: 0;
            }
        }

        &:last-child {
            margin-right: 0;
        }

        &:hover,
        &&.active {
            color: var(--mi-route-history-item-active-text, @mi-route-history-item-active-text);
            font-weight: bold;
        }

        &-mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 5;
        }

        & &-close {
            position: absolute;
            .properties(right, 10);
            .properties(width, 16);
            height: 100%;
            .flex();
            z-index: 10;
        }
    }

    &&-btn-disabled {
        .@{mi-history} {
            &-btn {
                display: none;
            }

            &-list {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }
}