$fresk-advindex-card-bg: $backgrounddrawerscolor;
$fresk-advindex-panel-bg: mix($body-color, $backgrounddrawerscolor, 4%);

$fresk-advindex-card-radius: 12px;
$fresk-advindex-gutter: 12px;
$fresk-advindex-pad-x: 13px;
$fresk-advindex-header-min-h: 44px;
$fresk-advindex-row-min-h: 48px;
$fresk-advindex-chip-size: 28px;
$fresk-advindex-chip-glyph: 16px;
$fresk-advindex-chip-radius: 8px;
$fresk-advindex-chip-gap: 12px;
$fresk-advindex-stroke-w: 3px;
$fresk-advindex-stroke-inset: 5px;
$fresk-advindex-star-size: 14px;
$fresk-advindex-star-gap: 8px;
$fresk-advindex-nest-indent: 14px;
$fresk-advindex-completion-w: 24px;
$fresk-advindex-transition: 120ms;
$fresk-advindex-font-size: 14px;

$fresk-advindex-active-bg: $iconfillerdrawerscolorhover;
$fresk-advindex-active-color: $icondrawerscolorhover;

$fresk-advindex-title-color: $letterdrawerscolor;
$fresk-advindex-muted-color: mix($letterdrawerscolor, $fresk-advindex-card-bg, 65%);
$fresk-advindex-dimmed-color: mix($letterdrawerscolor, $fresk-advindex-card-bg, 55%);

$fresk-advindex-drop-w: 2px;
$fresk-advindex-focus-w: 2px;

$fresk-advindex-lock-mask: url([[pix:theme|icons/lock-gray-program-icon]]);
$fresk-advindex-lock-size: 14px;

$fresk-advindex-done-mask: url([[pix:theme|icons/completed_cm]]);
$fresk-advindex-done-size: 16px;

$fresk-advindex-star-mask: url([[pix:theme|icons/star]]);

$fresk-advindex-chain: '.drawer.drawer-left .drawercontent .courseindex #courseindex-content .courseindex';
$fresk-advindex-scope: '#{$fresk-advindex-chain} .courseindex-section.fresk-advindex';

$fresk-advindex-hasadv: ':has(#course-index > .courseindex-section.fresk-advindex)';
$fresk-advindex-hasown: ':has(> .courseindex-section.fresk-advindex)';

.drawer.drawer-left#{$fresk-advindex-hasadv} {
    box-shadow: 0 0 10px 0 rgba($black, 0.1);
}

.drawer.drawer-left .drawercontent#{$fresk-advindex-hasadv} {
    background-color: $fresk-advindex-panel-bg;
    padding: 0;
}

#course-index#{$fresk-advindex-hasown} {
    padding: $fresk-advindex-gutter $fresk-advindex-gutter 0;

    > .bg-pulse-grey {
        min-height: $fresk-advindex-header-min-h;
        margin-block-end: $fresk-advindex-gutter;
        border-radius: $fresk-advindex-card-radius;
    }
}

.drawer.drawer-left#{$fresk-advindex-hasadv} .drawerheader h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#{$fresk-advindex-scope}:not(.delegated-section) {
    position: relative;
    margin-block-end: $fresk-advindex-gutter;
    border: $border-width solid $border-color;
    border-radius: $fresk-advindex-card-radius;
    background-color: $fresk-advindex-card-bg;
    box-shadow: 0 1px 2px rgba($black, 0.04);
    overflow: hidden;

    &.current {
        border: $border-width solid $border-color;
        padding-left: 0;
    }

    &.overlay-preview-borders {
        outline-offset: 2px;
    }
}

#{$fresk-advindex-scope} > .courseindex-item.courseindex-section-title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: $fresk-advindex-header-min-h;
    padding: 8px $fresk-advindex-pad-x;
    border: 0;
    border-radius: 0;
    transition: background-color $fresk-advindex-transition ease,
        color $fresk-advindex-transition ease;

    > a.courseindex-link[data-for="section_title"] {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        font-size: $fresk-advindex-font-size;
        font-weight: 600;
        line-height: 1.3;
        color: $fresk-advindex-title-color;
    }

    > .courseindex-locked {
        order: 2;
    }

    > .fresk-advindex-star {
        order: 3;
    }

    > .courseindex-chevron {
        order: 4;
        flex: 0 0 auto;
        margin-inline-start: $fresk-advindex-star-gap;
        margin-inline-end: -0.25rem;

        .collapsed-icon {
            .dir-rtl-hide .icon {
                transform: rotate(90deg);
            }

            .dir-ltr-hide .icon {
                transform: rotate(-90deg);
            }
        }

        .expanded-icon .icon {
            transform: rotate(180deg);
        }
    }

    &.dimmed > a.courseindex-link[data-for="section_title"] {
        color: $fresk-advindex-dimmed-color;
    }
}

#{$fresk-advindex-scope} .fresk-advindex-star {
    display: none;
    flex: 0 0 auto;
    width: $fresk-advindex-star-size;
    height: $fresk-advindex-star-size;
    background-color: $primary;
    -webkit-mask: $fresk-advindex-star-mask no-repeat center / contain;
    mask: $fresk-advindex-star-mask no-repeat center / contain;
}

#{$fresk-advindex-scope}.current:not(.delegated-section) {
    > .courseindex-item.courseindex-section-title {
        > .fresk-advindex-star {
            display: block;
        }

        &::before {
            content: '';
            position: absolute;
            inset-inline-start: $fresk-advindex-stroke-inset;
            inset-block: $fresk-advindex-stroke-inset;
            width: $fresk-advindex-stroke-w;
            border-radius: $fresk-advindex-stroke-w;
            background-color: $primary;
        }
    }

    > .courseindex-item.courseindex-section-title:hover,
    > .courseindex-item.courseindex-section-title.pageitem {
        &::before {
            background-color: $fresk-advindex-active-color;
        }

        > .fresk-advindex-star {
            background-color: $fresk-advindex-active-color;
        }
    }
}

#{$fresk-advindex-scope} .current-badge {
    @include visually-hidden();
}

#{$fresk-advindex-scope} > .courseindex-item-content {
    > [data-for="cmlist"] {
        padding: 0;
        margin: 0;

        > li.bg-pulse-grey {
            min-height: $fresk-advindex-row-min-h;
            margin: 0;
        }
    }
}

#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item:not(:has(> .courseindex-section)) {
    display: flex;
    align-items: center;
    min-height: $fresk-advindex-row-min-h;
    padding: 6px $fresk-advindex-pad-x;
    border: 0;
    border-radius: 0;
    border-block-start: $border-width solid $border-color;
    transition: background-color $fresk-advindex-transition ease,
        color $fresk-advindex-transition ease;

    > .courseindex-icon {
        order: 1;
    }

    > a.courseindex-link[data-for="cm_name"] {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        font-size: $fresk-advindex-font-size;
        font-weight: 400;
        color: $fresk-advindex-title-color;
    }

    > .courseindex-locked {
        order: 5;
        flex: 0 0 auto;
    }

    > .completioninfo {
        order: 4;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: $fresk-advindex-completion-w;
    }

    &.dimmed > a.courseindex-link[data-for="cm_name"] {
        color: $fresk-advindex-dimmed-color;
    }

    &.restrictions:not(.dimmed) > a.courseindex-link[data-for="cm_name"] {
        color: $fresk-advindex-muted-color;
    }

    &.indented {
        margin-inline-start: 0;
        padding-inline-start: calc(#{$fresk-advindex-pad-x} + #{map-get($spacers, 3)});
    }
}

#{$fresk-advindex-scope} .courseindex-item .fresk-cmicon-sm {
    width: $fresk-advindex-chip-size;
    height: $fresk-advindex-chip-size;
    border-radius: $fresk-advindex-chip-radius;
    margin-inline-end: $fresk-advindex-chip-gap;

    .fresk-cmicon-glyph {
        width: $fresk-advindex-chip-glyph;
        height: $fresk-advindex-chip-glyph;
    }
}

#{$fresk-advindex-scope} .courseindex-item > .fresk-cmicon-core {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $fresk-advindex-chip-size;
    height: $fresk-advindex-chip-size;
    max-width: $fresk-advindex-chip-size;
    max-height: $fresk-advindex-chip-size;
    margin-inline-end: $fresk-advindex-chip-gap;
    background-color: transparent;

    .activityicon {
        width: $fresk-advindex-chip-glyph;
        height: $fresk-advindex-chip-glyph;
        max-width: $fresk-advindex-chip-glyph;
        max-height: $fresk-advindex-chip-glyph;
        margin: 0;
    }
}

#{$fresk-advindex-scope} .courseindex-item.restrictions > .fresk-cmicon-sm {
    background-color: $iconfillerdrawerscolor;

    .fresk-cmicon-glyph {
        background-color: $icondrawerscolor;
    }
}

#{$fresk-advindex-scope} .courseindex-item.restrictions > .fresk-cmicon-core .activityicon {
    @include recolor-icon($icondrawerscolor, 1);
}

#{$fresk-advindex-scope} .courseindex-item > .courseindex-locked {
    > i {
        display: none;
    }

    &::before {
        content: '';
        display: block;
        width: $fresk-advindex-lock-size;
        height: $fresk-advindex-lock-size;
        background-color: $icondrawerscolor;
        -webkit-mask: $fresk-advindex-lock-mask no-repeat center / contain;
        mask: $fresk-advindex-lock-mask no-repeat center / contain;
    }
}

#{$fresk-advindex-scope} .courseindex-item.pageitem > .courseindex-locked::before,
#{$fresk-advindex-scope} .courseindex-item:hover > .courseindex-locked::before {
    background-color: $fresk-advindex-active-color;
}

#{$fresk-advindex-scope} .courseindex-item > .completioninfo .icon {
    margin-inline-end: 0 !important;
}

#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item:not(.pageitem) {
    > .completioninfo.completion_incomplete .icon {
        color: $gray-400 !important;
    }

    > .completioninfo.completion_fail .icon {
        color: $danger !important;
    }
}

#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item > .completioninfo.completion_complete {
    position: relative;
    height: $fresk-advindex-done-size;

    > i {
        font-size: 0 !important;
    }

    &::before {
        content: '';
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        width: $fresk-advindex-done-size;
        height: $fresk-advindex-done-size;
        margin-top: $fresk-advindex-done-size * -0.5;
        background-color: $success;
        -webkit-mask: $fresk-advindex-done-mask no-repeat center / contain;
        mask: $fresk-advindex-done-mask no-repeat center / contain;
    }
}

#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item.pageitem > .completioninfo.completion_complete::before,
#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item:hover > .completioninfo.completion_complete::before {
    background-color: $fresk-advindex-active-color;
}

#{$fresk-advindex-scope} .courseindex-item.pageitem {
    background-color: $fresk-advindex-active-bg !important;
    color: $fresk-advindex-active-color !important;

    a {
        color: $fresk-advindex-active-color !important;
    }

    .icon {
        color: $fresk-advindex-active-color !important;
    }

    &:hover {
        background-color: shade-color($fresk-advindex-active-bg, 7.5%) !important;
    }
}

#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item:not(.pageitem):not(:has(> .courseindex-section)):hover {
    background-color: $fresk-advindex-active-bg;

    > a.courseindex-link[data-for="cm_name"] {
        color: $fresk-advindex-active-color;
    }
}

#{$fresk-advindex-scope} > .courseindex-item.courseindex-section-title:not(.pageitem):hover {
    background-color: $fresk-advindex-active-bg;

    > a.courseindex-link[data-for="section_title"] {
        color: $fresk-advindex-active-color !important;
    }

    > .courseindex-chevron .icon {
        color: $fresk-advindex-active-color !important;
    }
}

#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item:has(> .courseindex-section) {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-block-start: $border-width solid $border-color;
    background-color: transparent;
}

#{$fresk-advindex-scope}.delegated-section {
    width: 100%;
    margin-block-end: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;

    > .courseindex-item-content > [data-for="cmlist"] > li.courseindex-item {
        padding-inline-start: calc(#{$fresk-advindex-pad-x} + #{$fresk-advindex-nest-indent});
    }
}

#course-index.editing#{$fresk-advindex-hasown} {
    .courseindex-item.draggable:hover {
        cursor: move;
    }

    .courseindex-item.overlay-preview-borders {
        outline-offset: -2px;
    }
}

body.dragging #{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item.drop-up:not(:has(> .courseindex-section)) {
    border-block-start: $fresk-advindex-drop-w solid $primary;
}

body.dragging #{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item.drop-down:not(:has(> .courseindex-section)) {
    border-block-end: $fresk-advindex-drop-w solid $primary;
}

body.dragging #{$fresk-advindex-scope}.drop-up {
    border-block-start: $fresk-advindex-drop-w solid $primary;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

body.dragging #{$fresk-advindex-scope}.drop-down {
    border-block-end: $fresk-advindex-drop-w solid $primary;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

body.dragging #{$fresk-advindex-scope}.delegated-section.overlay-preview-borders {
    outline-offset: -$fresk-advindex-drop-w;
}

#{$fresk-advindex-scope}:focus-visible,
#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item:focus-visible {
    outline: $fresk-advindex-focus-w solid $primary !important;
    outline-offset: -$fresk-advindex-focus-w !important;
}

#{$fresk-advindex-scope}:has(> .courseindex-item.pageitem):focus-visible,
#{$fresk-advindex-scope} > .courseindex-item-content > [data-for="cmlist"]
    > li.courseindex-item.pageitem:focus-visible {
    outline-color: color-contrast($fresk-advindex-active-bg) !important;
}