@import "../styles";

#page-concept-show {
    & .concept-header {
        & > .container {
            @apply flex items-center py-24;
        }
        background: linear-gradient(
            180deg,
            var(--backgroundColorI) 0%,
            transparent 100%
        );
        & .c-concept-icon {
            @apply mr-32;
        }
        & .info {
            @apply flex-grow;
        }
        & h1 {
            @apply flex items-center text-h1 mb-8;
            & small {
                @apply text-18 ml-16 mr-12 text-textColor5 font-normal;
            }
            & .c-track-icon {
                /* TODO: Switch these */
                /*@mixin track-icon 48px;*/
                width: 48px;
                height: 48px;
            }
        }
        & .exercises {
            @apply flex items-center text-18 text-textColor1;
            & .c-icon {
                @apply mr-8;
                height: 24px;
                width: 24px;
                @apply filter-textColor1;
            }
        }
        & .progress {
            @apply flex-shrink-0;

            & .progress-text {
                @apply flex items-center justify-end;
                @apply text-16 leading-150 text-textColor2 font-semibold;
                @apply mb-12;

                &.completed {
                    @apply font-semibold;
                    color: var(--textColorProgressTextCompleted);
                    & .c-icon {
                        @apply block;
                    }
                }
            }
            & .progress-exercises {
                @apply flex justify-end items-center;
                & .c-ed {
                    @apply ml-16;
                }
            }
        }
    }

    & section.mastered-heading {
        @apply flex items-center py-12 px-32 shadow-lg rounded-8 mb-32;
        @apply border-2 border-darkGreen;
        background: var(--backgroundColorCompletedHeading);

        .c-prominent-link {
            color: var(--backgroundColorNotificationsUnreadDot);
            .c-icon {
                filter: var(--iconFilterNotificationsProminentLink);
            }
        }
        & .check-mark-icon {
            height: 32px;
            width: 32px;
            @apply mr-16;
        }
        & .text {
            @apply text-h5 flex-grow;
        }
    }

    & .rhs {
        @apply flex-shrink-0;
        @screen xl {
            width: 520px;
        }
    }
    & section.about {
        @apply mb-32 bg-backgroundColorA rounded-8 shadow-lg;
        & .links {
            @apply mt-32;
            & h3 {
                @apply text-h3 mb-16;
            }
            & ul {
                @apply flex flex-wrap gap-12;
            }
            & a {
                @apply flex items-center;
                @apply shadow-base py-6 px-16 rounded-100;
                & .c-bg-img {
                    @apply mr-12;
                    height: 16px;
                    width: 16px;
                }
                & .c-icon {
                    height: 12px;
                    width: 12px;
                    @apply ml-8;
                    filter: var(--textColor6-filter);
                }
            }
        }
    }
    & section.extra-info {
        @apply flex items-center;

        & a {
            @apply text-15 text-textColor6 font-medium;
            @apply flex items-center;
            @apply ml-auto;

            & .c-icon {
                filter: var(--textColor6-filter);
            }

            & .github-icon {
                height: 22px;
                width: 22px;
                @apply mr-16;
            }
            & .action-icon {
                height: 12px;
                width: 12px;
                @apply ml-12;
            }
        }
    }

    & .learn,
    & .practice {
        & h3 {
            @apply flex items-center text-h4 mb-16;
            & .c-icon {
                @apply mr-16;
                height: 24px;
                width: 24px;
                @apply filter-textColor1;
            }
        }
        & .exercises {
            @apply flex flex-col;
            & .c-react-wrapper-common-exercise-widget {
                @apply w-100 mb-12;
            }
        }
    }
    & .learn + .practice {
        @apply mt-16;
    }
    & .practice-locked-bar {
        @apply mt-36 mb-48 border-t-1 border-borderColor6;
        @apply relative;
        & .c-icon {
            @apply absolute;
            height: 42px;
            width: 42px;
            top: -21px;
            left: 50%;
            margin-left: -21px;
        }
    }
}
