@import "../variables/variables";
@import "../mixins/private/token-mixins";

.education-notice {
    @include background-color-token(
        education-notice-default-background-color,
        color-background-secondary
    );
    @include border-radius-token(
        education-notice-border-radius,
        border-radius-100
    );

    color: var(--color-foreground-primary);
    font-size: var(--font-size-default);
    padding: var(--spacing-300);
}

.education-notice--prominent {
    @include background-color-token(
        education-notice-education-background-color,
        color-background-education
    );
}

.education-notice__header {
    align-items: center;
    display: flex;
}

.education-notice__title {
    flex-grow: 1;
    font-size: var(--font-size-medium);
    font-weight: bold;
    line-height: 1.5em;
    margin: 0;
    margin-inline-start: var(--spacing-150);
}

.education-notice__main {
    margin-top: var(--spacing-200);
}

.education-notice__dismiss {
    margin-inline-start: var(--spacing-150);
}

.education-notice button.icon-btn {
    background-color: transparent;
}

.education-notice__header .icon--prominent {
    color: var(--color-foreground-accent);
}

.education-notice__footer a {
    @include color-token(
        education-notice-foreground-color,
        color-foreground-primary
    );

    font-size: var(--font-size-default);
    font-weight: 700;
    white-space: nowrap; /* force links with text having more than one word to remain on same line */
}

.education-notice__footer button.fake-link {
    font-size: var(--font-size-default);
    font-weight: bold;
}

.education-notice__main p {
    font-size: var(--font-size-default);
    margin: 0;
}

.education-notice__footer {
    margin-top: var(--spacing-200);
}

.education-notice__header button.fake-link,
.education-notice__header button.fake-link:hover {
    @include color-token(
        education-notice-foreground-color,
        color-foreground-primary
    );

    font-size: var(--font-size-default);
    font-weight: bold;
    height: 24px;
    width: 24px;
}
