@import '../../scss/var';

.ui-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 30rpx;
    .anchor {
        pointer-events: none;
        position: absolute;
    }
    &.line {
        padding: 0 30rpx;
    }
    .action-icon {
        margin-left: -10rpx;
        margin-right: 10rpx;
    }
    .action {
        display: flex;
        align-items: center;
        &.hasLine {
            position: relative;
            z-index: 2;
            .action-line {
                position: absolute;
                width: 68%;
                height: 0.5em;
                bottom: 0;
                z-index: -1;
                opacity: 0.7;
            }
        }
        &.hasDot {
            position: relative;
            margin-left: 10rpx;
            z-index: 2;
            .action-dot {
                position: absolute;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                top: -0.3em;
                z-index: -1;
                margin-left: -0.5em;
                opacity: 0.7;
            }
        }
        .action-title {
            font-weight: bold;
        }
        .action-desc {
            margin-left: 10rpx;
            text-transform: Capitalize;
        }
    }
    &.center {
        justify-content: center;
        letter-spacing: 5rpx;
        .hasLine {
            .action-line {
                left: 0;
                right: 0;
                margin: auto;
            }
        }
    }
    &.right {
        justify-content: flex-end;
        letter-spacing: 5rpx;
        .hasDot {
            .action-dot {
                left: auto;
                right: 0;
            }
        }
        .hasLine {
            .action-line {
                left: auto;
                right: 0;
            }
        }
    }
    &.stack {
        .action {
            position: relative;
            &.hasLine {
                .action-line {
                    width: 100%;
                }
            }
            .action-title {
                position: relative;
                z-index: 2;
                top: 10rpx;
            }
            .action-desc {
                position: absolute;
                z-index: 1;
                left: 30rpx;
                margin: 0;
                font-size: 60rpx;
                font-weight: bold;
                opacity: 0.3;
                top: -10rpx;
            }
        }
        &.center,&.right {
            position: relative;
            z-index: 1;
            .action {
                position: initial;
            }
            .action-desc {
                top: 10rpx;
                left: 0;
                right: 0;
                margin: auto;
                text-align: center;
            }
        }
        &.right {
            .action-desc {
                text-align: right;
            }
        }
    }
    &.center-column {
        justify-content: center;
        letter-spacing: 5rpx;
        .action {
            flex-direction: column;
            .action-desc {
                font-size: 24rpx;
                margin: 0;
            }
            &.hasDot {
                position: relative;
                .action-dot {
                    height: 0px;
                    width: 100%;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    .view {
                        height: 1px;
                        background: inherit;
                        width: 100rpx;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        &:first-child {
                            left: -500rpx;
                            right: 0;
                            transform: rotate(180deg);
                        }
                        &:last-child {
                            left: 0;
                            right: -500rpx;
                        }
                        &::after {
                            content: '';
                            width: 4px;
                            height: 12px;
                            border-radius: 20px;
                            background: inherit;
                            display: block;
                            position: absolute;
                            top: -5px;
                            left: -10px;
                            transform: rotate(30deg);
                        }
                        &::before {
                            content: '';
                            width: 4px;
                            height: 20px;
                            border-radius: 20px;
                            background: inherit;
                            display: block;
                            position: absolute;
                            top: -10px;
                            left: -20px;
                            transform: rotate(30deg);
                        }
                    }
                }
            }
            &.hasLine {
                position: relative;
                .action-line {
                    height: 0px;
                    width: 100%;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    .view {
                        height: 1px;
                        background: inherit;
                        width: 160rpx;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        &:first-child {
                            left: -480rpx;
                            right: 0;
                            transform: rotate(180deg);
                        }
                        &:last-child {
                            left: 0;
                            right: -480rpx;
                        }
                        &::after {
                            content: '';
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(to left, var(--ui-BG), rgba(255, 255, 255, 0));
                            display: block;
                            position: absolute;
                        }
                    }
                }
            }
        }
    }
}

.heading-0 {
    padding-top: #{map-get($spacers, 4)};
    padding-bottom: #{map-get($spacers, 4)};
    font-size: calc(#{map-get($fontsize, xl)}rpx + var(--textSize)) !important;
    .action-desc{
        font-size: calc(#{map-get($fontsize, df)}rpx + var(--textSize)) !important;
    }
}

.heading-1 {
    padding-top: #{map-get($spacers, 5)};
    padding-bottom: #{map-get($spacers, 4)};
    font-size: calc(#{map-get($fontsize, xxl)}rpx + var(--textSize)) !important;
    .action-desc{
        font-size: calc(#{map-get($fontsize, lg)}rpx + var(--textSize)) !important;
    }
}

.heading-2 {
    padding-top: #{map-get($spacers, 4)};
    padding-bottom: #{map-get($spacers, 3)};
    font-size: calc(#{map-get($fontsize, xl)}rpx + var(--textSize)) !important;
    .action-desc{
        font-size: calc(#{map-get($fontsize, df)}rpx + var(--textSize)) !important;
    }
}

.heading-3 {
    padding-top: #{map-get($spacers, 3)};
    padding-bottom: #{map-get($spacers, 2)};
    font-size: calc(#{map-get($fontsize, lg)}rpx + var(--textSize)) !important;
    .action-desc{
        font-size: calc(#{map-get($fontsize, sm)}rpx + var(--textSize)) !important;
    }
}

.heading-4 {
    padding-top: #{map-get($spacers, 2)};
    padding-bottom: #{map-get($spacers, 1)};
    font-size: calc(#{map-get($fontsize, df)}rpx + var(--textSize)) !important;
    .action-desc{
        font-size: calc(#{map-get($fontsize, xs)}rpx + var(--textSize)) !important;
    }
}
