@use 'sass:math';

.plan-labels {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    margin-bottom: 40px;

    @include breakpoint(md) {
        margin-bottom: 80px;
    }

    &__item {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

    &__color {
        @include size(30px);

        border-radius: 50%;
    }

    &__title {
        @extend %base-styles-text-xs;

        color: var(--rocket-color-black-base);
    }
}

.plan {
    $this: &;

    position: relative;

    &__container {
        overflow: hidden;
        touch-action: pan-x pan-y;
        user-select: none;
        min-height: 500px;

        @include breakpoint(xl) {
            min-height: 0;
        }

        svg {
            margin: auto;
            display: block;
            width: 100%;
            height: 100%;
            cursor: auto !important;

            @include breakpoint(xl) {
                max-width: 100%;
                width: 100%;
                height: auto;
            }
        }

        .touchscreen-warning {
            display: none;
        }

        .buttons {
            display: none;
        }
    }

    &__popup {
        display: none;
        position: relative;
        // left: 50%;
        // top: 50%;
        // transform: translate(-50%, -50%);
        background: var(--rocket-color-white-base);
        // box-shadow: 7px 7px 14px 0 rgba(0, 0, 0, .5);
        padding: 20px 15px;
        width: 100%;
        // max-width: 450px;

        &--active {
            display: block;
        }
    }

    &__popup-close {
        @include transition(opacity);
        @include size(35px);

        position: relative;
        padding: 0;
        border: 0;
        display: block;
        margin-left: auto;
        margin-bottom: 5px;
        cursor: pointer;
        z-index: 1;

        @include event {
            opacity: 0.65;
        }

        svg {
            @include size(100%, auto);

            display: block;
            fill: #213822;
        }
    }

    &__download {
        display: flex;
        flex-direction: column;
        margin-top: 40px;
        row-gap: 20px;
        align-items: center;
    }

    &--vertical {
        display: flex;
        column-gap: 40px;

        @include breakpoint(xl) {
            column-gap: 90px;
        }

        #{$this} {
            &__container-wrapper {
                width: 100%;

                @include breakpoint(lg) {
                    max-width: 726px;
                    flex-shrink: 1;
                }
            }

            &__popup {
                @include breakpoint(lg) {
                    position: static;
                    transform: none;
                    flex-grow: 1;
                    box-shadow: none;
                    padding: 0;
                    max-width: 715px;
                    flex-shrink: 2;
                }
            }

            &__popup-close {
                @include breakpoint(lg) {
                    display: none;
                }
            }
        }
    }
}

.plan-popup-data {
    display: flex;
    flex-direction: column;
    row-gap: 30px;

    &__image {
        // border: 1px solid var(--rocket-color-black-a-50);
        // aspect-ratio: 715 / 543;
        display: flex;
        margin: auto;
        max-height: 240px;

        img {
            @include max-size(100%);

            object-fit: contain;

        }
    }
}

.plan-popover-trigger {
    @include transition(transform);

    transform: scale(1);
    transform-box: content-box;
    transform-origin: center;

    &:not([x-bind=""]) {
        cursor: pointer;
        &:hover {
            transform: scale(1.3);
        }
    }
}

.plan-popover {
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 20px 12px;
    column-gap: 12px;
    background-color: var(--rocket-color-red-300);
    color: var(--rocket-color-white-base);
    width: fit-content;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 7px 19px 40px 0 rgba(0, 0, 0, .3);

    &__item:not(:last-child) {
        border-bottom: 1px solid var(--rocket-color-white-base);
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    &__link {
        @extend %base-styles-text-xs;

        color: inherit;
        text-decoration: none;
        text-align: center;
        display: block;
        width: 180px;

        @include event {
            text-decoration: underline;
        }
    }

    &--active {
        display: flex;
    }
}

.plan-image {
    filter: drop-shadow(7px 19px 40px var(--rocket-color-black-a-50));
}