@import "../styles";

.m-track-welcome-modal.c-modal.--cover {
    background: var(--modalBackgroundColor);

    .--modal-container {
        padding: 50px 0;
    }

    .wrapper {
        overflow-y: scroll;
        max-height: 100%;
        width: 100%;
        @apply flex items-start justify-center;
    }
    .--modal-content {
        padding: 0;
        max-height: none;

        @apply mt-20 mb-40;
        @apply py-40 px-48 bg-backgroundColorA;
        @apply shadow-lgZ1 rounded-16;
        @apply overflow-hidden;
        width: 100%;
        max-width: 1120px;
    }

    .lhs {
        @apply flex flex-col flex-grow mr-48 w-1-2;

        h1 {
            @apply text-h1 mb-12;
        }
        p,
        li {
            @apply text-17 leading-huge;

            strong {
                @apply font-medium;
            }
            a {
                @apply font-semibold text-linkColor;
            }
        }
        li {
            @apply mb-2;
        }
        .improvements {
            @apply mt-24 mb-32;

            .improvement {
                @apply flex items-start;

                + .improvement {
                    @apply mt-24;
                }
                .c-icon {
                    height: 64px;
                    width: 64px;
                    @apply flex-shrink-0 mr-24;
                }
                h3 {
                    @apply text-h5 mb-4;
                }
                p {
                    @apply text-textColor3;
                }
            }
        }
    }

    .rhs {
        @apply flex flex-col flex-shrink-0;
        width: 450px;

        .video {
            @apply mb-40;
            @apply relative rounded-8 overflow-hidden;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;

            iframe,
            object,
            embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
        .thank-you {
            @apply bg-backgroundColorD;
            @apply rounded-8 py-24 px-32;

            h3 {
                @apply text-h4 mb-8;
            }
            p {
                @apply text-16 leading-paragraph;
            }
        }
    }
}
