@use '~flux/components/css/mixin';

.tour {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    z-index: 9999;
}

.tourSpotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--w);
    height: var(--h);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / .55);
    pointer-events: none;
    translate: var(--x) var(--y);
    transition: translate .25s var(--swift-out), width .25s var(--swift-out), height .25s var(--swift-out);
}

.tourPopover {
    position: fixed;
    top: 0;
    left: 0;
    width: 321px;
    max-width: calc(100vw - 24px);
    translate: var(--x) var(--y);
    z-index: 1;

    &.isStepping {
        transition: translate .25s var(--swift-out);
    }
}

.tourPane {
    overflow: hidden;
}

.tourBodyViewport {
    position: relative;
    overflow: hidden;
    transition: height .25s var(--swift-out);
}

.tourBody {
    display: flex;
    padding: 15px 18px;
    flex-flow: column;
    gap: 6px;
    transition: opacity .15s var(--swift-out);

    &:global(.v-leave-active) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    &:global(.v-enter-from),
    &:global(.v-leave-to) {
        opacity: 0;
    }
}

.tourTitle {
    @include mixin.text(default);

    color: var(--foreground-prominent);
    font-weight: 600;
}

.tourContent {
    @include mixin.text(small);

    color: var(--foreground);
}

.tourFooter {
    display: flex;
    padding: 12px 18px;
    gap: 6px;
    align-items: center;
    border-top: 1px solid var(--surface-stroke);
}

.tourProgress {
    @include mixin.text(xsmall);

    color: var(--foreground-secondary);
}

.tourSkip {
    @include mixin.text(xsmall);

    margin-right: 12px;
    padding: 0;
    cursor: pointer;
    transition: color .15s var(--swift-out);
    color: var(--foreground-secondary);
    border: 0;
    background: none;

    @include mixin.hover {
        color: var(--foreground);
    }

    @include mixin.focus-ring(2px);
}