@import '~theme/globals.scss';

:host {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 1px; // To allow margins inside.
    background-color: var(--contrast-background);

    @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));

    .core-modulename {
        text-transform: uppercase;
    }

    core-mod-icon {
        align-self: flex-start;
    }

    h1 ion-icon {
        color: var(--medium);
        @include margin-horizontal(8px, null);
        font-size: 80%;

    }

    .core-module-dates-availabilityinfo {
        background: var(--light);
        border-radius: var(--small-radius);
        padding: 8px;
        margin: 8px;
        font-size: 90%;
        ion-icon {
            position: static;
            @include margin-horizontal(null, 8px);
        }

        p,
        ul {
            margin-top: 4px;
            margin-bottom: 4px;
        }
    }

    .core-module-dates + .core-module-availabilityinfo {
        border-top: 1px solid var(--stroke);
        padding-top: 8px;
    }

    core-course-module-completion ::ng-deep ion-button {
        min-height: 28px;
        margin: 0;
        font-size: 12px;
        text-transform: none;
        font-weight: normal;

        ion-icon {
            font-size: 16px;
            min-width: 16px;
            @include margin(0, 8px, 0, 0);
        }

        ion-label {
            white-space: normal !important;
        }
    }


}

:host-context(.core-iframe-fullscreen) {
    opacity: 0 !important;
    height: 0 !important;
}
