@ebay/skin/dist/section-notice/section-notice.css

Skin - CSS modules that represent the brand eBay

.section-notice {
    background-color: var(
        --section-notice-default-background-color,
        var(--color-background-secondary)
    );
    border-radius: var(--section-notice-border-radius, var(--border-radius-50));
    font-size: var(--font-size-default);
    margin: 8px 0;
    padding: 16px;
}

div[role="region"].section-notice,
section.section-notice {
    display: grid;
    grid-template-columns: 32px auto auto auto;
}
.section-notice--education {
    background-color: var(
        --section-notice-education-background-color,
        var(--color-background-education)
    );
}

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

.section-notice__title {
    font-size: var(--font-size-default);
    font-weight: 400;
    margin: 0;
}
.section-notice__cta a {
    white-space: nowrap;
}
.section-notice__title:not(:only-child) {
    font-weight: 700;
}

.section-notice button.fake-link {
    font-size: var(--font-size-default);
    font-weight: 700;
}

.section-notice a,
.section-notice button.fake-link,
.section-notice button.fake-link:hover {
    color: var(
        --section-notice-foreground-color,
        var(--color-foreground-primary)
    );
}

.section-notice a {
    font-size: var(--font-size-default);
    font-weight: 700;
}

.section-notice a:hover {
    color: var(
        --section-notice-foreground-color,
        var(--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);
}
.section-notice__main .section-notice__title ~ p {
    margin: var(--spacing-50) 0 0;
}
@media (min-width: 512px) {
    div[role="region"].section-notice,
    section.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: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
[dir="rtl"] .section-notice__main {
    padding-right: 0;
}
[dir="rtl"] p.section-notice__cta {
    margin-left: 16px;
    padding-left: 16px;
}
.section-notice__header:has(svg[class*="24"]) {
    height: var(--spacing-300);
}
.section-notice__header:has(svg[class*="24"]) + .section-notice__main {
    padding-top: 2px;
}