@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-index {
    width: 100%;
    position: relative;
    overflow: hidden;

    &__nav {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translate3d(0, -50%, 0);
        cursor: pointer;
        user-select: none;
        text-align: center;

        &-row {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            height: 100%;
            width: 100%;
            position: relative;
            line-height: @index-nav-size;
            font-size: @index-nav-font-size;
        }

        &-col {
            padding: @index-nav-padding / 2 @index-nav-padding;
            line-height: inherit;
            font-size: inherit;
        }

        &-item {
            display: inline-flex;
            width: @index-nav-size;
            height: @index-nav-size;
            line-height: inherit;
            font-size: inherit;
            justify-content: center;
            align-items: center;

            &--current {
                color: @text-color-inverse;
                background-color: @balanced;
                border-radius: 50%;
            }
        }
    }

    &__indicator {
        width: @index-indicator-size;
        height: @index-indicator-size;
        line-height: @index-indicator-size;
        text-align: center;
        background-color: @index-indicator-bg;
        border-radius: @index-indicator-border-radius;
        color: @index-indicator-color;
        font-size: @index-indicator-font-size;

        &--center {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
        }

        &--right {
            position: absolute;
            top: calc(@index-nav-size / 2 + @index-nav-padding / 2);
            right: 100%;
            border-radius: 50%;
            transform: translateY(-50%);
            margin-right: calc(@index-nav-size - 1px);
            background-color: @balanced;

            &::before {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50% 0% 50% 50%;
                content: '';
                background-color: inherit;
                left: 0;
                top: 0;
                transform: rotate(45deg);
                z-index: -1;
            }
        }
    }
}