@ebay/skin 18.1.0 → 18.2.1

package/src/sass/drawer-dialog/drawer-dialog.scss

@@ -1,167 +0,0 @@
-@import "../variables/variables";
-@import "../mixins/private/dialog-mixins";
-@import "../mixins/private/token-mixins";
-
-.drawer-dialog[role="dialog"] {
-    @include dialog-base();
-
-    align-items: flex-end;
-}
-
-.drawer-dialog--no-mask[role="dialog"] {
-    background-color: transparent;
-}
-
-.drawer-dialog__header {
-    @include dialog-header-content(var(--spacing-250));
-}
-
-.drawer-dialog__header .fake-link {
-    align-self: flex-start;
-    text-decoration: none;
-}
-
-.drawer-dialog__handle {
-    background-color: transparent;
-    border: none;
-    left: 0;
-    margin: -11px auto;
-    padding: 8px;
-    position: relative;
-    right: 0;
-    top: 11px;
-    z-index: 2;
-}
-
-/* Added :after class in order to increase parent hit box */
-.drawer-dialog__handle::after {
-    @include background-color-token(dialog-handle-color, color-stroke-default);
-
-    border-radius: 3px;
-    content: "";
-    display: block;
-    height: 2px;
-    width: 24px;
-}
-
-.drawer-dialog__main {
-    @include dialog-body-content();
-
-    min-height: auto;
-    overflow: auto;
-}
-
-.drawer-dialog__footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding: 16px;
-    position: relative;
-    > * {
-        flex: 1;
-    }
-
-    & > :not(:first-child) {
-        margin-left: 8px;
-    }
-}
-
-/* inherits from .icon-btn */
-/* Added icon button selector so it doesn't override fake-link */
-button.icon-btn.drawer-dialog__close {
-    align-self: flex-start;
-    border: 0;
-    height: 32px;
-    min-width: 32px;
-    position: relative;
-    width: 32px;
-    z-index: 1;
-}
-
-.drawer-dialog__window {
-    @include dialog-window();
-
-    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
-    max-height: 50%;
-    max-width: 100%;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: hidden;
-}
-
-.drawer-dialog__window--expanded {
-    height: 95%;
-    max-height: 95%;
-}
-
-.drawer-dialog__window--slide {
-    transition: max-height 0.32s ease-out;
-}
-
-.drawer-dialog--show,
-.drawer-dialog--hide {
-    /* Root animations. */
-    &.drawer-dialog--mask-fade {
-        transition: background-color 0.16s ease-out;
-    }
-
-    &.drawer-dialog--mask-fade-slow {
-        transition: background-color 0.32s ease-out;
-    }
-
-    /* Child animations. */
-    .drawer-dialog__window--fade {
-        transition: opacity 0.16s ease-out;
-    }
-
-    .drawer-dialog__window--slide {
-        transition: transform 0.32s ease-out;
-    }
-}
-
-/* Apply hide animation. */
-.drawer-dialog--hide,
-.drawer-dialog--show-init {
-    &drawer-dialog--hide,
-    &.drawer-dialog--show-init {
-        display: flex;
-    }
-
-    /* Root animations. */
-    &.drawer-dialog--mask-fade,
-    &.drawer-dialog--mask-fade-slow {
-        background-color: var(--dialog-scrim-color-hide);
-    }
-
-    /* code smell, chained modifier */
-    .drawer-dialog__window--slide {
-        transform: translateY(100%);
-    }
-}
-
-/* Apply show animation. */
-.drawer-dialog--show,
-.drawer-dialog--hide-init {
-    &.drawer-dialog--show,
-    &.drawer-dialog--hide-init {
-        display: flex;
-    }
-
-    /* Root animations. */
-    &.drawer-dialog--mask-fade,
-    &.drawer-dialog--mask-fade-slow {
-        background-color: var(--dialog-scrim-color-show);
-    }
-
-    /* Child animations. */
-    .drawer-dialog__window--fade {
-        opacity: 1;
-    }
-
-    .drawer-dialog__window--slide {
-        transform: translateX(0);
-    }
-}
-
-.drawer-dialog__handle:focus:not(:focus-visible) {
-    outline: none;
-}

package/src/sass/drawer-dialog/stories/drawer-dialog.stories.js

@@ -1,285 +0,0 @@
-export default { title: "Skin/Drawer Dialog (DEPRECATED)" };
-
-export const empty = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-        </div>
-    </div>
-</div>
-`;
-
-export const partial = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const withFooter = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-        <div class="drawer-dialog__footer">
-            <button class="btn">Cancel</button>
-            <button class="btn btn--primary">Submit</button>
-        </div>
-    </div>
-</div>
-`;
-
-export const textSpacing = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow demo-a11y-text-spacing" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-        <div class="drawer-dialog__footer">
-            <button class="btn">Cancel</button>
-            <button class="btn btn--primary">Submit</button>
-        </div>
-    </div>
-</div>
-`;
-
-export const RTL = () => `
-<div dir="rtl">
-    <div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-        <div class="drawer-dialog__window drawer-dialog__window--slide">
-            <button class="drawer-dialog__handle"></button>
-            <div class="drawer-dialog__header">
-                <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-                <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                        <use href="#icon-close-16"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="drawer-dialog__main">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                </p>
-                <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            </div>
-        </div>
-    </div>
-</div>
-`;
-
-export const half = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const full = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide drawer-dialog__window--expanded">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const textClose = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
-            <button class="fake-link">Apply</button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const withFooterAndHeaderOverflow = () => `
-<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
-    <div class="drawer-dialog__window drawer-dialog__window--slide">
-        <button class="drawer-dialog__handle"></button>
-        <div class="drawer-dialog__header">
-            <h2 id="dialog-title" class="large-text-1 bold-text">Heading that is so long it needs to wrap across multiple lines. In order for this to happen, text needs to span the entire width of the screen. No dialog header should ever be this long.</h2>
-            <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-        <div class="drawer-dialog__footer">
-            <button class="btn">Cancel</button>
-            <button class="btn btn--primary">Submit</button>
-        </div>
-    </div>
-</div>
-`;

package/src/sass/education-notice/education-notice.scss

@@ -1,92 +0,0 @@
-@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;
-}