@import "../styles";

.m-completed-exercise.c-modal.--cover,
.c-modal.m-completed-tutorial-exercise.c-modal.--cover {
    background: var(--modalBackgroundColor);

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

    & .--modal-content {
        width: 100%;
        max-width: 834px;
        min-height: auto;
        @apply pt-88 pb-56 px-48 bg-backgroundColorA;
        @apply shadow-lgZ1 rounded-8;
        @apply flex flex-col items-center;
        @apply relative;
        @apply overflow-visible;
    }

    & .--modal-content {
        & > .c-icon {
            height: 128px;
            width: 128px;
            top: -64px;
            @apply absolute mb-24;
            filter: drop-shadow(
                0px -5px 42px rgba(var(--shadowColorMain), 0.3)
            );
        }
        & > h3 {
            @apply text-h4 mb-24;
        }
    }

    & h2 {
        @apply text-h1 mb-16;
    }

    & p {
        @apply text-p-large mb-24 text-center;
        & a {
            @apply text-textColor2 underline font-normal;
        }
    }
    & .info {
        @apply bg-backgroundColorB py-12 px-24;
        @apply text-p-base text-center;
        @apply border-1 border-borderColor6 rounded-8;
        max-width: 650px;
        & a {
            @apply text-lightBlue font-semibold;
        }
    }
    & .btns {
        @apply flex;
        & .btn-primary {
            @apply mr-12;
        }
        & .btn {
            @apply ml-12;
        }
    }
}
.m-completed-exercise.c-modal.--cover {
    & .progressed-concepts {
        @apply mt-24;
        @apply w-100;
    }

    & .unlocks {
        @apply mt-24;
    }

    & .btns {
        @apply mt-24;
    }
}
