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

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

    font-size: var(--font-size-default);
    margin: 8px 0;
    padding: 16px;
}

div[role="region"].section-notice,
section.section-notice {
    display: grid;
    /* provide explicit structure up front, create loose markup model */
    grid-template-columns: 32px auto auto auto;
}

/* TODO: Remove in 18.0.0 since Education Notice is now its own module. */
.section-notice--education {
    @include background-color-token(
        section-notice-education-background-color,
        color-background-education
    );
}

span[role="region"].section-notice {
    display: grid;
}

.section-notice__title {
    font-size: var(--font-size-default);
    font-weight: normal;
    margin: 0;
}

/* force links with text having more than one word to remain on same line */
.section-notice__cta a {
    white-space: nowrap;
}

/* legacy version with separate bold heading */
.section-notice__title:not(:only-child) {
    font-weight: bold;
}

.section-notice button.fake-link {
    @include color-token(
        section-notice-foreground-color,
        color-foreground-primary
    );

    font-size: var(--font-size-default);
    font-weight: bold;
}

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

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

    font-size: var(--font-size-default);
    font-weight: bold;
}

.section-notice a:hover {
    @include color-token(
        section-notice-foreground-color,
        color-foreground-primary
    );
}

.section-notice .icon {
    vertical-align: top;
}

.section-notice__header {
    grid-column: 1;
    grid-row: 1;
    height: var(--spacing-200);
    margin-inline-end: var(--spacing-200);
    margin-top: 1px;
}

.section-notice__main {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-inline-end: var(--spacing-200);
}

.section-notice__header + .section-notice__main {
    grid-column: 2;
}

.section-notice__footer {
    grid-column: 4;
    grid-row: 1;
    justify-self: flex-end;
    margin-top: 2px;
}

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

p.section-notice__cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: flex-start;
    margin-right: var(--spacing-200);
    margin-top: var(--spacing-200);
}

/* support legacy 6.5 notice with heading + paragaphs */
.section-notice__main .section-notice__title ~ p {
    margin: var(--spacing-50) 0 0;
}

/* LARGE SCREEN ADJUSTMENTS */

@media (min-width: $_screen-size-SM) {
    section.section-notice,
    div[role="region"].section-notice {
        margin: var(--spacing-200) 0;
    }

    p.section-notice__cta {
        grid-column: 4;
        grid-row: 1;
        justify-self: flex-end;
        margin-bottom: 0;
        margin-top: 0;
        padding-right: var(--spacing-200);
    }

    .section-notice__footer {
        padding-left: var(--spacing-200);
    }
}

[dir="rtl"] {
    .section-notice__footer {
        justify-self: flex-start;
        margin-left: initial;
        margin-right: auto;
        padding-left: initial;
        padding-right: 0;
    }

    .section-notice__main {
        padding-right: 0;
    }

    p.section-notice__cta {
        margin-left: 16px;
        padding-left: 16px;
    }
}

/* progressive enhancement adjustment for larger 24x24 icon */
/* browsers without :has support will have text top aligned like regular section-notice */
.section-notice__header:has(svg[class*="24"]) {
    height: var(--spacing-300);

    + .section-notice__main {
        padding-top: 2px;
    }
}
