$mod-row-padding-y: 1rem;
$mod-row-gap: 1rem;
$mod-icon-size: 2rem;
$mod-icon-box: 3rem;
$mod-state-size: 1.875rem;
$mod-title-size: 1.0625rem;
$mod-meta-size: .8125rem;

$mod-divider: #EAECF0;
$mod-title: #1D2939;
$mod-meta: #667085;
$mod-done: #12B76A;
$mod-locked-bg: #F2F4F7;
$mod-locked-fg: #98A2B3;
$mod-card-border: #E4E7EC;

@mixin mod-glyph($ligature, $size: 1.125rem) {
    content: $ligature;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    line-height: 1;
    font-size: $size;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    mask: none;
    -webkit-mask: none;
    background-color: transparent;
}

@mixin mod-svg-glyph($size: 1.125rem) {
    content: '';
    display: block;
    width: $size;
    height: $size;
    font-size: 0;
}

@mixin mod-state-circle($background, $foreground: #fff) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: $mod-state-size;
    height: $mod-state-size;
    min-width: $mod-state-size;
    min-height: $mod-state-size;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: $background;
    color: $foreground;
    box-shadow: none;
    text-decoration: none;
    font-size: 0;
}

body.fresk-activityrows {

    ul[data-for="cmlist"]:has(> li > .fresk-mod) {
        display: block !important;
        grid-template-columns: none;
        gap: 0;
        margin: 0;
        padding: 0 !important;
        list-style: none;
    }

    li:has(> .fresk-mod) {
        display: block !important;
        grid-column: 1 / -1;
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        border-top: 1px solid $mod-divider !important;

        &:first-child {
            border-top: 0 !important;
        }
    }

    li.modtype_subsection {
        > .activity-item {
            display: block !important;
            width: 100% !important;
            border: 1px solid $mod-card-border !important;
            border-radius: .75rem !important;
            box-shadow: none !important;
            background: none !important;
            background-color: transparent !important;
            padding: 0 !important;
            overflow: hidden !important;

            > .activity-grid:not(.activity-basis) {
                display: block !important;
                margin: 0 !important;
                padding: 0 !important;
                gap: 0 !important;
            }

            > ul {
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .section.course-section,
            .course-content-item-content {
                box-shadow: none !important;
                border: 0 !important;
                background: none !important;
                background-color: transparent !important;
            }

            .section.course-section {
                margin-bottom: 0 !important;
                padding: 0 !important;
            }

            .section-item {
                padding-top: 0 !important;
            }
        }
    }

    .fresk-mod {
        display: block;
        padding: $mod-row-padding-y 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        background-color: transparent;
        box-shadow: none;
        color: $mod-title;
        font-size: 1rem;
        line-height: 1.4;

        &--hidden {
            opacity: .6;
        }

        &__head {
            display: flex;
            align-items: center;
            column-gap: $mod-row-gap;
            min-width: 0;
        }

        &__body {
            flex: 1 1 auto;
            min-width: 0;
        }

        &__icon {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;

            .activityiconcontainer {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                align-self: center !important;
                margin: 0 !important;
                padding: 0;
                width: $mod-icon-size !important;
                height: $mod-icon-size !important;
                max-width: none;
                max-height: none;
                border: 0;
                border-radius: 0;
                background: none;
                box-shadow: none;
                text-decoration: none;
            }

            .activityiconcontainer.fresk-cmicon-hasbg {
                width: $mod-icon-box !important;
                height: $mod-icon-box !important;
                border-radius: .75rem;
                background-color: var(--fresk-cmicon-bg, transparent);
            }

            .fresk-cmicon-glyph {
                width: $mod-icon-size;
                height: $mod-icon-size;
            }

            .activityicon,
            img,
            .icon {
                width: $mod-icon-size;
                height: $mod-icon-size;
                max-width: none;
                max-height: none;
                margin: 0 !important;
                font-size: $mod-icon-size;
            }
        }

        &__name {
            position: relative;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            column-gap: .5rem;
            min-width: 0;

            .inplaceeditable,
            .inplaceeditable-text {
                display: inline;
                margin: 0;
                padding: 0;
            }

            a,
            .instancename {
                display: inline;
                color: $mod-title;
                font-size: $mod-title-size;
                font-weight: 700;
                line-height: 1.35;
                text-decoration: none;
                overflow: visible;
                -webkit-line-clamp: unset;
                max-width: none;
            }

            a:hover,
            a:focus {
                color: $primary;
                text-decoration: none;
            }
        }

        &__badge {
            display: inline-flex;
            align-items: center;

            .activitybadge {
                margin: 0;
                font-weight: 500;
            }
        }

        &__meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            column-gap: .75rem;
            margin-top: .125rem;
            font-size: $mod-meta-size;
            color: $mod-meta;

            &:empty {
                display: none;
            }

            > * {
                margin: 0;
                padding: 0;
                border: 0;
                width: auto;
            }

            .badge {
                font-weight: 500;
            }

            .groupmode-information {
                display: inline-flex;
                align-items: center;
                width: auto;
                height: auto;
                padding: 0;
                border: 0;
                background: none;

                .icon {
                    margin: 0;
                    font-size: 1rem;
                }
            }
        }

        &__dates,
        &__visibility,
        &__groupmode {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
        }

        &__state {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 1;

            [data-region="completion-info"],
            [data-region="completionrequirements"] {
                display: flex;
                align-items: center;
                margin: 0;
                padding: 0;
            }

            .dropdown {
                position: static;
            }

            button[data-action="toggle-manual-completion"],
            .completion-dropdown > button {
                @include mod-state-circle($primary);

                > i,
                > .icon,
                > svg {
                    display: none;
                }

                &::after {
                    display: none;
                }

                &::before {
                    @include mod-svg-glyph(1.5rem);
                    background-color: #fff;
                    mask: url([[pix:theme_fresk|icons/play_arrow]]) center / contain no-repeat;
                    -webkit-mask: url([[pix:theme_fresk|icons/play_arrow]]) center / contain no-repeat;
                }

                &:hover,
                &:focus {
                    background-color: darken($primary, 8%) !important;
                    color: #fff !important;
                    border: 0;
                    box-shadow: none;
                }

                &:focus-visible {
                    outline: 2px solid $primary;
                    outline-offset: 2px;
                }
            }

            button[data-action="toggle-manual-completion"][data-toggletype="manual:undo"],
            .completion-dropdown > button.btn-subtle-success {
                background-color: $mod-done;

                &::before {
                    @include mod-glyph('check');
                }

                &:hover,
                &:focus {
                    background-color: darken($mod-done, 8%) !important;
                    color: #fff !important;
                }
            }

            .completion-dropdown > button.fresk-mod-untracked {
                background-color: $mod-locked-bg;
                color: $mod-locked-fg;

                &::before {
                    @include mod-glyph('list');
                    color: $mod-locked-fg;
                }

                &:hover,
                &:focus {
                    background-color: darken($mod-locked-bg, 6%) !important;
                    color: $mod-meta !important;

                    &::before {
                        color: $mod-meta;
                    }
                }
            }

            .dropdown-menu {
                font-size: .875rem;
                min-width: 14rem;
                margin: 0;
                text-align: start;
            }
        }

        &--restricted {
            .fresk-mod__head::after {
                @include mod-state-circle($mod-locked-bg, $mod-locked-fg);
                @include mod-glyph('lock');
                color: $mod-locked-fg;
                order: 99;
            }
        }

        &__actions {
            flex: 0 0 auto;
            margin: 0;
            padding: 0;
        }

        &__description,
        &__afterlink {
            margin: .5rem 0 0;
            padding: 0;
            border: 0;
            font-size: $mod-meta-size;
            color: $mod-meta;

            p:last-child {
                margin-bottom: 0;
            }
        }

        &__conditions {
            margin: .625rem 0 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: none;
            background-color: transparent;
            font-size: $mod-meta-size;
            color: $mod-meta;

            .showmore-container {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: .375rem;
                margin: 0;
                padding: 0;

                &.collapsed > .expanded-content,
                &:not(.collapsed) > .collapsed-content {
                    display: none;
                }

                &.collapsed > .collapsed-content,
                &:not(.collapsed) > .expanded-content {
                    display: inline-flex;
                    align-items: baseline;
                    gap: .375rem;
                }
            }

            .showmore-button {
                order: 2;
                display: inline-flex;
                align-items: center;
                min-height: 0;
                margin: 0;
                padding: 0;
                border: 0;
                background: none;
                font-weight: 400;
                color: $mod-meta;
                text-decoration: none;
                box-shadow: none;

                > .collapsed-content,
                > .expanded-content {
                    font-size: 0;
                    padding: 0;
                    gap: 0;
                }

                .icon {
                    margin: 0;
                    width: 1rem;
                    height: 1rem;
                    font-size: 1rem;
                    color: $mod-meta;
                }
            }

            .showmore-container > .collapsed-content,
            .showmore-container > .expanded-content {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: $mod-meta-size;
                color: $mod-meta;
                overflow: visible;
            }

            .icon {
                margin: 0;
                width: 1rem;
                height: 1rem;
                font-size: 1rem;
                color: $mod-locked-fg;
            }
        }

        &__conditions-label {
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        &__conditions-text {
            font-weight: 400;

            ul {
                margin: .25rem 0 0;
                padding-inline-start: 1.25rem;
            }
        }

        @media (max-width: 575.98px) {
            &__head {
                column-gap: .75rem;
            }

            &__name a,
            &__name .instancename {
                font-size: 1rem;
            }
        }
    }
}