@import "instance";

.main_ball {
    @include whs(min(41.66vw, 800px));

    @include brp($b5) {
        @include whs(min(58.59vw, 600px));
    }

    @include brp($b6) {
        @include whs(min(71.42vw, 700px));
    }

    @include brp($b8) {
        @include whs(80vw);
    }
}

.bg_hero_ball {
    .main_ball {
        @include transform(translate(-50%, -50%));
        @include position(absolute, 50%, 50%);
    }
}

.container_ball {
    .main_ball {
        @include position(absolute);
        transform-origin: center center;
        will-change: transform;
        display: block;
        z-index: 3;
    }

    .container_tooltip {
        @include position(absolute);
        overflow: hidden;
        z-index: 4;

        &.active {
            overflow: visible;
            z-index: 5;
        };

        &.left {
            @include align-items(center);
            @include flex;
            @include gap(25px);

            .tooltip {
                @include tooltip(( direction: left ));
                left: 70px;

                @include brp($b8) {
                    left: -14px;
                }

                @include brp(380) {
                    left: -37px;
                }
            }
        }

        &.right {
            @include flex-direction(row-reverse);
            @include align-items(center);
            @include flex;
            @include gap(25px);

            .tooltip {
                @include tooltip(( direction: right ));
                right: 70px;

                @include brp($b8) {
                    right: -4px;
                }
            }
        }

        .tooltip {
            @include transition(all $t2);
            @include wh(0);
            opacity: 0;

            &.open {
                @include animation(open_tooltip $t5 both);
                z-index: 4;

                .title_tooltip { @include animation(op $t5 $t10 both); }
                .description_tooltip { @include animation(op $t5 $t10 both); }
            }

            &.close {
                @include transition(height $t2);
                @include animation(close_tooltip $t5 $t5 both);
                z-index: 1;

                .title_tooltip { @include animation(opc $t5 both); }
                .description_tooltip { @include animation(opc $t5 both); }
            }

            .content_tooltip { min-height: 70px; }
        }

        .open_tooltip {
            all: initial;
            @include transition(rotate $t3);
            @include center-flex-column;
            @include border-radius(50%);
            @include normalize-svg((
                width: calc(nth($l9, 1) + 20px),
                height: calc(nth($l9, 1) + 20px)
            ));
            @include bc(rgba($c4, 0.5), $c0);
            rotate: 0deg;
            cursor: pointer;
            z-index: 4;

            &.active { rotate: 45deg; }
        }

        .close_tooltip {
            all: initial;
            @include center-flex-column;
            @include border-radius(50%);
            @include normalize-svg((
                position: absolute,
                width: nth($l10, 1) + 20px,
                height: nth($l10, 1) + 20px,
                xaxis: right,
                x: -15px,
                y: -10px
            ));
            @include bc($c2, $c0);
            cursor: pointer;
            z-index: 4;
        }

        .title_tooltip {
            @include t1((
                transform: uppercase,
                size: clamp(szrem(24), 1.82vw, szrem(35)),
                align: left,
                weight: 700
            ));
            opacity: 0;
        }

        .description_tooltip {
            @include t1((
                size: clamp(szrem(14), 0.94vw, szrem(18)),
                align: left,
                weight: 400
            ));
            opacity: 0;
        }
    } // .container_tooltip
}