@use "theme/globals" as *;

:host {
    --horizontal-margin: 12px;
    --vertical-margin: 12px;
    --card-padding: 16px;

    ion-card {
        margin: var(--vertical-margin) var(--horizontal-margin);

        &.activityinline {
            border: 0px;
        }
    }

    ion-item {
        --padding-start: var(--card-padding);
        --inner-padding-end: var(--card-padding);
        ion-label {
            margin-top: var(--card-padding);
            margin-bottom: var(--card-padding);
            &>:last-child {
                margin-bottom: 0px;
            }
        }
    }

    .activity-main {
        --min-height: 52px;
        display: flex;
        flex-direction: row;

        core-mod-icon {
            margin-top: 0px;
            margin-bottom: 0px;
            --module-icon-padding: 0px;
            --module-legacy-icon-padding: 4px;
            --module-icon-radius: var(--mdl-shape-borderRadius-xs);

            @include margin-horizontal(null, 8px);
            align-self: self-start;
        }

        .activity-title {
            flex-grow: 1;
            align-self: center;
            @include margin-horizontal(null, var(--card-padding));

            .item-heading ion-icon {
                @include margin-horizontal(8px, null);
                vertical-align: middle;
            }
        }

        .core-module-buttons {
            align-self: self-start;
            margin: 0;

            display: flex;
            flex-flow: row;
            align-items: center;
            z-index: 1;
            justify-content: flex-end;
            align-content: center;

            ion-button.core-module-button-more {
                cursor: pointer;
                pointer-events: auto;
                margin: 0px 8px;
                --a11y-target-min-size: 32px;
                width: var(--a11y-target-min-size);
                height: var(--a11y-target-min-size);
                min-width: var(--a11y-target-min-size);
                min-height: var(--a11y-target-min-size);
                --padding-start: 0px;
                --padding-end: 0px;
                ion-icon {
                    font-size: var(--mdl-typography-icon-fontSize-md);
                }
            }

            core-course-module-completion {
                --margin: 0px;
            }
        }

        .core-module-additional-info {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 4px;
            margin-bottom: 4px;

            ion-badge {
                @include margin-horizontal(null, 4px);
                font-size: 12px;
                font-weight: normal;
            }
        }
    }

    .core-module-description ::ng-deep img,
    .activity-title .item-heading core-format-text ::ng-deep img {
        border-radius: var(--mdl-shape-borderRadius-lg);
    }

    core-course-module-completion {
        --margin: 8px 0px;
    }

    .activity-dates {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        core-reminders-date {
          --display-icon: none;
        }
    }

    .activity-description-availabilityinfo,
    .activity-extrabadges {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--stroke);
    }

    .activity-extrabadges {
        color: var(--medium);
    }

    .activity-description-availabilityinfo {
        .core-module-availabilityinfo {
            background: var(--gray-300);
            border-radius: var(--mdl-shape-borderRadius-sm);
            margin-top: 8px;
            padding: 8px;
            font-size: 14px;
            line-height: 120%;

            ::ng-deep ul {
                margin-top: 8px;
                margin-bottom: 0px;

                li {
                    margin-bottom: 4px;
                }
            }

            ion-icon {
                @include margin-horizontal(null, 8px);
            }
        }
    }

    .core-module-loading {
        width: 100%;
        text-align: center;
        padding-top: 10px;
        clear: both;
    }

    .core-course-last-module-viewed {
        padding: 8px 12px;
        color: var(--subdued-text-color);
        border-top: 1px solid var(--stroke);

        ion-icon {
            margin-right: 4px;
        }
    }

    @include media-breakpoint-down(md) {
        .core-module-buttons core-course-module-completion {
            display: none;
        }
    }

    @include media-breakpoint-up(md) {
        core-course-module-completion.activity-extra {
            display: none;
        }
    }

    &.indented ion-card {
        border: none;
        --ion-card-radius: 0;
        @include margin-horizontal(calc(var(--horizontal-margin) + 1rem), null);
    }

    &.indented + ::ng-deep core-course-module.indented ion-card {
        border-top: 1px solid var(--border-color);
    }

    // Hide download folder icon meanwhile MOBILE-4147 is not solved
    core-format-text.core-module-description ::ng-deep .description-inner .navitem {
        display: none;
    }
}


:host-context(html.dark) {
    .activity-description-availabilityinfo {
        .core-module-availabilityinfo {
            background: var(--gray-800);
        }
    }
}
