@import "../styles";

.c-react-wrapper-common-introducer {
    /* We get rid of this parent container when
     * things are hidden, rather than the child */
    transition: min-height 0.2s ease-in, max-height 0.2s ease-in,
        margin 0.2s ease-in, opacity 0.15s ease-in;
    overflow: hidden;

    @apply lg:min-h-[130px] lg:max-h-[160px];
    @apply mt-8 mb-40;

    &.hidden {
        min-height: 0;
        max-height: 0;
        margin: 0;
        opacity: 0;
    }
}

.c-react-wrapper-common-introducer .c-introducer {
    &.hidden {
        display: flex;
    }
}

.c-introducer {
    @apply bg-randomBlue border-2 border-gradient rounded-12;
    @apply shadow-baseZ1;
    @apply px-20 lg:px-48 py-16 lg:py-12;
    @apply lg:flex flex-row items-center;

    &.hidden {
        display: none;
    }

    &.--small {
        @apply py-16 px-24;

        & .visual-icon {
            @apply h-[20px] lg:h-[48px] w-[20px] lg:w-[48px];
            @apply mr-24;
        }
        & .info {
            & h2,
            & h3 {
                @apply text-h6;
            }

            & p {
                @apply text-p-small;
            }
        }
        & .close {
            @apply pr-0;
            & .c-icon {
                width: 16px;
                height: 16px;
            }
        }
    }

    & .visual-icon {
        @apply h-[48px] lg:h-[102px] w-[48px] lg:w-[102px];
        @apply mb-8 ml-32 lg:mb-0 lg:ml-0 lg:mr-32;
        @apply float-right lg:float-none;
    }
    & .info {
        & h2,
        & h3 {
            @apply text-h4 mb-4;
        }
        & p {
            @apply text-p-base;
            @apply lg:max-w-[680px];
            @apply mb-8 lg:mb-0;

            & a {
                @apply text-prominentLinkColor font-medium;
            }
        }
    }
    & .close {
        @apply lg:ml-auto lg:flex-shrink-0 lg:p-12;
        @apply lg:filter-textColor6;
        & .c-icon {
            width: 24px;
            height: 24px;
        }
    }
}
