/**
 * Course Lessons
 *
 * This file contains the styles for the course lesson pages.
 *
 * @package Coerver
 */

@import 'starterkit/fonts';
@import 'starterkit/mixins';
@import 'starterkit/variables';

.wp-site-blocks > .sensei-course-theme__frame {
    @include breakpoint(md) {
        background: url('/wp-content/uploads/sites/6/2023/02/Group-18653.svg')
            no-repeat center center;
    }
}

.wp-block-post-title {
    font-family: $font-family-secondary;
    font-style: italic;
    font-weight: 600 !important;
    letter-spacing: -0.05em;
    margin-bottom: 0 !important;
    text-transform: uppercase;
}

.sensei-course-theme__sidebar {
    background-color: $black;
    background: linear-gradient(180deg, $dark-grey 0%, $black 100%);
}

.sensei-course-theme-course-progress-bar {
    background-color: $white !important;
    height: 10px !important;
}

.sensei-course-theme-course-progress {
    color: $white !important;
    font-family: $font-family-secondary;
    font-size: 140% !important;
    font-style: italic;
    font-weight: 600 !important;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.sensei-course-theme__frame.sensei-lms-notice {
    background-color: $yellow;
    background: linear-gradient(
        to right,
        rgba(249, 237, 51, 1) 0%,
        rgba(241, 180, 52, 1) 100%
    ) !important;
    box-shadow: 0px 4px 20px rgba(35, 31, 32, 0.15);
    color: $black !important;
    padding: 1.2rem 1.5rem 1.4rem !important;

    .sensei-course-theme-locked-lesson-notice__header {
        padding-bottom: 0 !important;
    }

    .sensei-course-theme-locked-lesson-notice__icon svg {
        display: block !important;
        height: 1.5rem !important;
        position: relative !important;
        top: -0.05rem !important;
        width: 1.5rem !important;
    }

    .sensei-course-theme-locked-lesson-notice__title {
        font-family: $font-family-secondary !important;
        font-size: 2rem !important;
        font-style: italic !important;
        font-weight: 600 !important;
        letter-spacing: -0.05em !important;
        text-transform: uppercase !important;
    }

    .sensei-course-theme-locked-lesson-notice__text {
        font-size: 1.3rem;
        font-weight: 400 !important;
        margin-bottom: 0 !important;
        margin-left: 2.6rem;
    }
}

.sensei-course-theme__sidebar-progress {
    padding-top: 0 !important;
    margin-bottom: 3rem !important;
}

.sensei-course-theme-course-progress-bar-inner {
    background-color: $green !important;
    height: 10px !important;
}

.editor-styles-wrapper .sensei-lms-course-navigation-module__title {
    color: $green !important;
    font-size: 120% !important;
}

.sensei-collapsible__toggle {
    padding: 1rem 0;

    .sensei-lms-course-navigation-module__title,
    .sensei-lms-course-navigation-module__collapsible-icon {
        color: $white !important;
        transition:
            color 0.2s,
            scale 0.2s;
    }

    &:hover,
    &:active,
    &:focus {
        .sensei-lms-course-navigation-module__title,
        .sensei-lms-course-navigation-module__collapsible-icon {
            color: $green !important;
        }

        .sensei-lms-course-navigation-module__collapsible-icon {
            scale: 1.2;
        }
    }
}

.sensei-lms-course-navigation-module__summary,
.editor-styles-wrapper .sensei-lms-course-navigation-lesson__link,
.sensei-lms-course-navigation-lesson__link {
    color: $white !important;
}

.sensei-lms-course-navigation-lesson.current-lesson {
    &,
    .sensei-lms-course-navigation-lesson__title,
    .sensei-lms-course-navigation-lesson__status {
        color: $yellow !important;
    }
}

.sensei-lms-course-navigation-lesson__status {
    margin-top: 0.2rem;
}

.wp-block-sensei-lms-exit-course a,
.sensei-course-theme
    .sensei-buttons-container
    .wp-block-button
    .wp-block-button__link {
    background-color: $green !important;
    border: 1px solid $green !important;
    color: $text !important;
    font-family: $font-family-secondary !important;
    font-style: italic !important;
    font-weight: 600 !important;
    text-transform: uppercase;

    &:hover,
    &:focus {
        background: $dark-green !important;
        color: $white !important;
    }

    &:active {
        background-color: $green !important;
        color: $text !important;
    }
}

.wp-block-sensei-lms-exit-course {
    text-decoration: none !important;

    a {
        background-color: transparent !important;
        border: 1px solid $dark-green !important;
        color: $dark-green !important;
        padding: 0.75rem 1.4rem;
        text-decoration: none !important;
    }
}

.status-locked .sensei-lms-course-navigation-lesson__link {
    color: $white !important;
}

.sensei-lms-course-navigation-lesson__link {
    align-items: start;
}

.sensei-lms-course-navigation-lesson {
    &.status-locked,
    &.status-not-started .sensei-lms-course-navigation-lesson__status {
        opacity: 0.9;
    }
}

.sensei-lms-course-navigation__modules {
    gap: 3rem;
}

.wp-block-embed.is-type-video {
    box-shadow: 0px 4px 16px rgba(35, 31, 32, 0.3);
}

.sensei-lms-course-navigation-module:has(.current-lesson) {
    .sensei-lms-course-navigation-lesson__title,
    .sensei-lms-course-navigation-module__title {
        color: $yellow !important;
    }

    .sensei-lms-course-navigation-lesson__status {
        color: $yellow !important;
    }

    .status-locked {
        opacity: 0.7;
    }
}