@import '../../../styles/theme/index.less';
@mi-anchor: ~'@{mi-prefix}anchor';

.@{mi-anchor} {
    position: fixed;
    .properties(min-height, 100);
    max-height: calc(100vh - 24rem);
    border: 1px solid var(--mi-theme, @mi-theme);
    .linear-gradient-background();
    transition: all @mi-anim-duration;
    transform-origin: right center;
    .border-radius();
    .properties(top, 200);
    .properties(right, -4);
    .properties(padding, 16);
    .properties(max-width, 320);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: @mi-z-index-modal;

    &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    &::-webkit-scrollbar-track {
        background: #f6f6f6;
        border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #747474;
    }

    &::-webkit-scrollbar-corner {
        background: #f6f6f6;
    }

    &-title {
        .flex();
        .properties(margin-bottom);
    }

    &-title &-icon {
        .properties(margin-right, 24);
        transition: all @mi-anim-duration ease;
        cursor: pointer;
        color: var(--mi-font, @mi-font);
        .properties(font-size, 14);

        .anticon {
            outline: none;
            .properties(font-size, 12);
        }

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

        &:hover {
            color: var(--mi-theme, @mi-theme);
        }
    }

    &-box {
        .properties(padding-right);
        .properties(padding-left, 16);
        .properties(font-size, 14);
        list-style: none;
        position: relative;
    }

    &-link {
        .flex(center, flex-start);
        .properties(padding-top);
        .properties(padding-bottom);
        .properties(font-size, 12);
        cursor: pointer;
        transition: all @mi-anim-duration ease;

        a {
            .text-ellipsis();
            .properties(max-width, 180);
            color: var(--mi-font, @mi-font);
        }

        .anticon {
            outline: none;
            color: var(--mi-font, @mi-font);
            .properties(margin-right, 16);
        }

        &:hover {
            a, .anticon {
                color: var(--mi-theme, @mi-theme);
            }
        }

        &&-active {
            a, .anticon {
                color: var(--mi-theme, @mi-theme);
            }
        }
    }

    &-stick {
        position: fixed;
        top: 220px;
        .properties(right, -214);
        .linear-gradient-background();
        .properties(padding);
        .border-radius(8);
        .properties(height, 132);
        .properties(width, 256);
        .flex(flex-start, flex-start);
        flex-direction: column;
        border: 1px solid var(--mi-theme, @mi-theme);
        transition: all @mi-anim-duration ease;
        cursor: pointer;
        z-index: @mi-z-index-modal;

        .anticon {
            color: var(--mi-font, @mi-font);
            .properties(font-size, 14);
            position: relative;
            top: 0;
            .properties(left);
        }

        &-text {
            .properties(font-size, 12);
            color: var(--mi-font, @mi-font);
            .properties(line-height, 14);
            transform: rotate(-90deg);
            display: inline-block;
            position: relative;
            .properties(top, 42);
            .properties(left, -28);
        }
    }
}