.floating-info-dropdown {
    @include absolute(auto, -5px, -5px, auto);

    background-color: var(--rocket-color-primary-100);
    border: 4px solid var(--rocket-color-primary-100);
    border-radius: 4px;
    display: block;
    min-width: 300px;
    opacity: 0;
    padding: 30px 20px;
    transition: visibility 300ms ease-in-out, transform 550ms ease-in-out, opacity 300ms ease-in-out;
    visibility: hidden;
    width: auto;

    @include breakpoint(md) {
        min-width: 400px;
        padding: 64px 32px 40px;
    }

    &__close {
        @include transition;
        @include absolute(5px, 5px);
        @include size(30px);

        align-items: center;
        border: 0;
        border-radius: 3px;
        color: var(--rocket-color-white-base);
        cursor: pointer;
        display: flex;
        justify-content: center;
        padding: 3px;

        @include breakpoint(md) {
            @include absolute(20px, 20px);
        }

        @include event {
            background-color: var(--rocket-color-black-base);
        }
    }

    &__close-icon {
        @include size(17px);

        align-items: center;
        display: flex;
        justify-content: center;
        color: inherit;

        svg {
            @include size(auto);

            display: block;
        }
    }

    &.is-open {
        opacity: 1;
        transition: visibility 300ms ease-in-out, transform 300ms ease-in-out, opacity 550ms ease-in-out;
        visibility: visible;
    }

    &__wrapper {
        align-items: flex-start;
        color: var(--rocket-color-secondary-100);
        display: flex;
        flex-direction: column;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.16;
        gap: 10px;
        text-align: center;

        @include breakpoint(md) {
            font-size: 1.9375rem;
        }

        > * {
            color: var(--rocket-color-white-base);
            font-size: 1em;
            line-height: 1.16;
        }
    }

    &__link {
        @include transition;

        color: var(--rocket-color-white-base);
        font-weight: 700;
        margin: 0 auto;

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

.floating-info {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 1001;

    &__toggle {
        @include size(50px);

        background-color: var(--rocket-color-primary-100);
        border: 4px solid var(--rocket-color-secondary-100);
        border-radius: 50%;

        @include breakpoint(md) {
            @include size(70px);
        }

        @include event {
            scale: 1.1;
        }

        .button__icon {
            @include transition;
            @include size(20px, 28px);

            align-items: center;
            display: flex;
            justify-content: center;

            @include breakpoint(md) {
                @include size(29px, 42px);
            }

            svg {
                @include transition;
                @include size(100%);

                display: block;
                fill: var(--rocket-color-white-base);
            }
        }
    }
}