` + */ + span.base-aside-card__metadata-item+span.base-aside-card__metadata-item::before { + content: "\00b7"; + margin: 0 4px; + } + + .banner.dismiss { + visibility: hidden; + max-height: 0px; + overflow: hidden; + } + + .banner__link.link-no-visited-state { + font-size: 20px; + font-weight: 400; + color: var(--color-text); + } + + .banner__link.link-no-visited-state:hover { + color: var(--color-text); + text-decoration-line: none; + } + + .banner__link.link-no-visited-state:focus { + text-decoration-line: none; + } + + .banner__link.link-on-dark-bg { + font-weight: 400; + color: var(--color-text-on-dark); + } + + .banner__link.link-on-dark-bg:hover { + text-decoration-line: none; + } + + .banner__link.link-on-dark-bg:focus { + text-decoration-line: none; + } + + .banner__link-cta.link-no-visited-state { + font-size: 20px; + font-weight: 400; + color: var(--color-text); + } + + .banner__link-cta.link-no-visited-state:hover { + color: var(--color-text); + } + + @media (min-width: 992px) { + .base-detail-page__header .nav { + margin-left: auto; + margin-right: auto; + width: 1128px; + } + } + + .cta-modal:not(.show):not(.dismiss) { + visibility: hidden; + opacity: 0; + } + + .cta-modal.show { + transition-delay: 0.5s; + transition-duration: 560ms; + transition-timing-function: cubic-bezier(0, 0, 0.21, 1); + animation-name: opacity-in; + animation-fill-mode: forwards; + } + + .cta-modal.dismiss { + display: none; + transition-duration: 560ms; + transition-timing-function: cubic-bezier(0.55, 0, 1, 1); + } + + .ellipsis-menu .collapsible-dropdown__button { + height: 40px; + min-height: 40px; + } + + .ellipsis-menu .collapsible-dropdown__list { + right: 0px; + z-index: 100; + width: 90vw; + max-width: 260px; + overflow: hidden; + border-top-right-radius: 0; + } + + .embedded-social-share .modal__outlet { + height: min-content; + min-height: 32px; + border-radius: 24px; + padding-top: 7px; + padding-bottom: 7px; + padding-left: 16px; + padding-right: 16px; + text-align: center; + font-size: 14px; + font-weight: 600; + } + + .embedded-social-share .modal__outlet, + .embedded-social-share .modal__outlet:visited, + .embedded-social-share .modal__outlet:focus { + cursor: pointer; + text-decoration-line: none; + } + + .embedded-social-share .modal__outlet:hover, + .embedded-social-share .modal__outlet:visited:hover { + text-decoration-line: none; + } + + .embedded-social-share .modal__outlet:disabled { + cursor: not-allowed; + } + + .embedded-social-share .modal__outlet, + .embedded-social-share .modal__outlet:visited, + .embedded-social-share .modal__outlet:focus { + box-shadow: 0 0 0 1px var(--color-button-container-tertiary-border); + background-color: var(--color-button-container-tertiary); + color: var(--color-button-label-tertiary); + } + + .embedded-social-share .modal__outlet:hover, + .embedded-social-share .modal__outlet:visited:hover { + box-shadow: 0 0 0 1px var(--color-button-container-tertiary-border); + background-color: var(--color-button-container-tertiary-hover); + color: var(--color-button-label-tertiary-hover); + } + + .embedded-social-share .modal__outlet:active { + box-shadow: 0 0 0 1px var(--color-button-container-tertiary-border-active); + background-color: var(--color-button-container-tertiary-active); + color: var(--color-button-label-tertiary-active); + } + + .embedded-social-share .modal__outlet:disabled { + box-shadow: 0 0 0 1px var(--color-button-container-tertiary-border-disabled); + background-color: var(--color-button-container-tertiary-disabled); + color: var(--color-button-label-tertiary-disabled); + } + + .embedded-social-share .modal__outlet { + display: flex; + align-items: center; + justify-content: center; + border-radius: 0px !important; + color: var(--color-text); + } + + @media (max-width: 767px) { + .embedded-social-share .modal__outlet { + flex-direction: row; + font-size: 14px; + } + } + + .embedded-social-share .modal__outlet--outlet-button-circular { + padding: 8px; + } + + .embedded-social-share .modal__outlet--outlet-button-square { + border-radius: 0px !important; + } + + .embedded-social-share__modal .modal__wrapper { + display: flex; + max-width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: var(--color-background-container-dark-tint); + color: var(--color-text-on-dark); + } + + .embedded-social-share__modal .modal__overlay { + background-image: none; + } + + .endorsement-card__content .show-more-less-text__text--less, + .endorsement-card__content .show-more-less-text__text--more { + color: inherit; + } + + /* TODO - Remove these styles once support for color inherit is added to tailwind-mercado */ + .inline-notification__text, + .cta-link, + .cta-link:hover, + .cta-link:active { + color: inherit; + } + + .language-selector .collapsible-dropdown__list { + box-shadow: 0px 4px 12px var(--color-shadow); + border-radius: 8px; + background-color: var(--color-surface); + left: -10%; + max-height: 90vh; + } + + .li-footer [data-hydrate="LanguageSelector"] { + display: flex; + } + + /* For desktop views, the search bar precedes the logo */ + /* For mobile views, the search bar comes after the logo, primary, and secondary CTAs */ + .nav .search-bar { + order: 2; + } + + @media (max-width: 767px) { + .nav .search-bar { + order: 4; + } + } + + .nav .sign-in-card { + position: absolute; + right: 0px; + top: 66px; + order: 5; + border-top-right-radius: 0px; + } + + @media (max-width: 767px) { + .nav .sign-in-card { + display: none; + } + } + + .nav .sign-in-modal { + display: inline-block; + } + + /* hide all cta buttons except for the person link */ + @media (max-width: 767px) { + .nav--minified-mobile .nav__cta-container>*:not(.nav__link-person) { + display: none; + } + } + + /* Remove the reordering of the search placeholder on mobile and the wrapped styles when sticky/stuck and scrolling */ + @media screen and (max-width: 767px) { + .nav .search-bar--minified-mobile { + /* Spacing added because borders are touching by default with flex styles */ + margin-bottom: 0px; + height: 100%; + flex-grow: 1; + padding-top: 5px; + padding-bottom: 5px; + order: initial; + width: initial; + } + + /* Remove spacing added because of the original reorder & flex-wrap style */ + .nav .search-bar--minified-mobile .search-bar__placeholder { + margin-top: 0px; + } + } + + .member-nav-header__link-item { + margin-left: 24px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .member-nav-header__link-item:first-child { + margin-left: 0px; + } + + .member-nav-header__link-item:hover { + text-decoration-line: none; + } + + .member-nav-header__nav-text { + cursor: pointer; + font-size: 12px; + font-weight: 400; + color: var(--color-text-low-emphasis); + } + + .member-nav-header__nav-icon { + height: 24px; + width: 24px; + color: var(--color-text-low-emphasis); + } + + .member-nav-header__nav-icon:hover { + color: var(--color-text-solid-active); + } + + .member-nav-menu__item { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 24px; + padding-right: 24px; + font-size: 14px; + opacity: 0.9; + } + + .member-nav-menu__item:hover { + color: var(--color-link); + text-decoration-line: underline; + } + + .member-nav-menu__item-link, + .member-nav-menu__item-link:visited, + .member-nav-menu__item-link:link, + .member-nav-menu__item-link:link:visited { + font-weight: 600; + color: var(--color-link); + } + + .member-nav-menu__item-link:hover, + .member-nav-menu__item-link:visited:hover, + .member-nav-menu__item-link:link:hover, + .member-nav-menu__item-link:link:visited:hover { + color: var(--color-link-hover); + } + + .member-nav-menu__item-link:active, + .member-nav-menu__item-link:visited:active, + .member-nav-menu__item-link:link:active, + .member-nav-menu__item-link:link:visited:active { + color: var(--color-link-active); + } + + .banner__link.member-nav-menu__item-link { + font-size: 20px; + font-weight: 400; + color: var(--color-text); + } + + .banner__link.member-nav-menu__item-link:hover { + color: var(--color-text); + text-decoration-line: none; + } + + .banner__link.member-nav-menu__item-link:focus { + text-decoration-line: none; + } + + .banner__link-cta.member-nav-menu__item-link { + font-size: 20px; + font-weight: 400; + color: var(--color-text); + } + + .banner__link-cta.member-nav-menu__item-link:hover { + color: var(--color-text); + } + + .member-nav-menu__item-link { + font-weight: 400; + color: var(--color-text); + } + + .member-nav-menu__item-link:hover { + color: var(--color-text); + text-decoration-line: none; + } + + .member-nav-menu__item-link--default { + font-size: 14px; + opacity: 0.9; + } + + .member-nav-menu__item-link--default:visited { + opacity: 0.8; + } + + .member-nav-menu__item-link--profile, + .member-nav-menu__item-link--profile:visited, + .member-nav-menu__item-link--profile:link, + .member-nav-menu__item-link--profile:link:visited { + font-weight: 600; + color: var(--color-link); + } + + .member-nav-menu__item-link--profile:hover, + .member-nav-menu__item-link--profile:visited:hover, + .member-nav-menu__item-link--profile:link:hover, + .member-nav-menu__item-link--profile:link:visited:hover { + color: var(--color-link-hover); + } + + .member-nav-menu__item-link--profile:active, + .member-nav-menu__item-link--profile:visited:active, + .member-nav-menu__item-link--profile:link:active, + .member-nav-menu__item-link--profile:link:visited:active { + color: var(--color-link-active); + } + + .banner__link.member-nav-menu__item-link--profile { + font-size: 20px; + font-weight: 400; + color: var(--color-text); + } + + .banner__link.member-nav-menu__item-link--profile:hover { + color: var(--color-text); + text-decoration-line: none; + } + + .banner__link.member-nav-menu__item-link--profile:focus { + text-decoration-line: none; + } + + .banner__link-cta.member-nav-menu__item-link--profile { + font-size: 20px; + font-weight: 400; + color: var(--color-text); + } + + .banner__link-cta.member-nav-menu__item-link--profile:hover { + color: var(--color-text); + } + + .member-nav-menu__item-link--profile { + display: flex; + align-items: center; + padding-top: 16px; + padding-right: 8px; + padding-bottom: 10px; + padding-left: 24px; + } + + .member-nav-menu__item-link--profile:hover { + text-decoration-line: none; + } + + /* Styling the collapsible dropdown ("me" menu) */ + [data-id="member-nav-header__link-item-me"] .collapsible-dropdown__list { + right: 0px; + left: auto; + margin-top: 4px; + height: auto; + height: fit-content; + max-height: calc(100vh - 52px); + width: max-content; + max-width: 288px !important; + overflow: visible !important; + overflow-y: auto; + border-top-right-radius: 0px !important; + } + + .tw-linkster-link.link { + font-size: 14px; + line-height: 24px; + color: var(--color-text-secondary); + } + + .tw-linkster-link.link:visited { + color: var(--color-text-secondary); + } + + .tw-linkster-link.link:hover { + color: var(--color-link-hover); + } + + .tw-linkster-link.link:focus { + color: var(--color-link-active); + } + + .tw-linkster-link.link:active { + color: var(--color-link-active); + } + + .tw-linkster-general-link.link:visited { + color: var(--color-link); + } + + @media (max-width: 767px) { + .tw-link-column-item { + margin-top: 10px; + margin-bottom: 10px; + } + } + + @media (min-width: 992px) { + .tw-link-column-item { + margin-bottom: 8px; + } + + .tw-linkster .tw-link-column-item { + margin-bottom: 0px; + } + } + + .tw-expandable-linkster .show-more-less__button { + font-size: 24px; + font-weight: 400; + color: var(--color-text); + } + + .tw-expandable-linkster .show-more-less__button--chevron { + vertical-align: baseline; + } + + .member-nav-menu .collapsible-dropdown__button { + margin-top: 12px; + height: 30px; + min-height: 30px; + width: 30px; + } + + .member-nav-menu .collapsible-dropdown__button:focus { + color: #ffffff; + } + + @media (max-width: 767px) { + .member-nav-menu .collapsible-dropdown__button { + margin-top: 24px; + margin-bottom: 24px; + margin-left: 16px; + } + } + + .member-nav-menu .collapsible-dropdown__list { + right: -8px; + left: auto; + margin-top: 4px; + width: 288px; + overflow: visible; + border-top-right-radius: 0; + } + + @media (max-width: 767px) { + .member-nav-menu .collapsible-dropdown__list { + right: 0px; + max-height: calc(100vh - 52px); + overflow-y: auto; + } + } + + .loader:not(.loader--show) { + display: none; + } + + .loader--show { + display: flex; + align-items: center; + justify-content: center; + } + + .loader--show.loader--absolute { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + } + + .loader--show.loader--full-screen { + position: fixed; + top: 0px; + left: 0px; + z-index: 1000; + display: flex; + height: 100vh; + width: 100vw; + align-items: center; + justify-content: center; + background-color: var(--color-canvas); + } + + /* + * change opacity and disable pointer events + * added to parent for absolute overlayed loader + */ + .loader-wrapper { + pointer-events: none; + position: relative; + opacity: 0.6; + } + + .modal__overlay.modal__overlay--visible { + pointer-events: auto; + visibility: visible; + opacity: 1; + } + + .modal__overlay--visible, + .modal__overlay .modal__wrapper { + transform: none; + } + + .base-search-bar .typeahead-input, + .base-search-bar .search-input { + flex-grow: 1; + border-radius: 0px; + border-top-width: 0; + border-bottom-width: 0; + border-left-width: 0; + border-right-width: 1px; + border-style: solid; + border-color: var(--color-border-faint); + } + + .recent-searches__item { + border-top-width: 2px; + border-bottom-width: 2px; + border-style: solid; + border-color: rgba(0, 0, 0, 0); + } + + .recent-searches__clear-btn { + border-width: 2px; + border-style: solid; + border-color: rgba(0, 0, 0, 0); + } + + .recent-searches:not(.recent-searches--show) { + pointer-events: none; + opacity: 0; + } + + .recent-searches.recent-searches--show { + pointer-events: auto; + opacity: 1; + } + + @media (max-width: 767px) { + .recent-searches.recent-searches--show { + position: fixed; + top: 168px; + left: 0px; + width: 100vw; + min-width: 100vw; + border-width: 0; + } + } + + .recent-searches__item:hover .recent-searches__item-link, + .recent-searches__item--highlighted .recent-searches__item-link { + color: var(--color-text) !important; + } + + .recent-searches__item:hover, + .recent-searches__item--highlighted:not(.recent-searches__item--clear) { + border-top-width: 2px; + border-bottom-width: 2px; + border-style: solid; + background-color: var(--color-surface-new-hover); + border-color: var(--color-container-primary); + } + + .recent-searches__item--highlighted .recent-searches__clear-btn, + .recent-searches__item--clear .recent-searches__clear-btn:hover { + border-radius: 4px; + border-width: 2px; + border-style: solid; + background-color: var(--color-surface-new-hover); + color: var(--color-text); + border-color: var(--color-container-primary); + } + + .search-bar__placeholder { + transition: + border-color 0.4s, + max-height 0.4s ease-in-out; + } + + @media (max-width: 767px) { + .search-bar .dismissable-input { + background-color: var(--color-input-container); + border-color: var(--color-input-container-border); + color: var(--color-input-value); + border-radius: 4px; + border-width: 1px; + border-style: solid; + padding-left: 16px; + padding-right: 16px; + padding-top: 14px; + padding-bottom: 14px; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", + Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, + sans-serif; + font-size: 16px; + } + + .search-bar .dismissable-input:hover { + background-color: var(--color-input-container-hover); + border-color: var(--color-input-container-border-hover); + box-shadow: 0 0 0 1px var(--color-input-container-border-hover); + cursor: pointer; + border-width: 1px; + } + + .search-bar .dismissable-input:active { + background-color: var(--color-input-container-active); + border-color: var(--color-input-container-border-active); + cursor: pointer; + border-width: 1px; + } + + .search-bar .dismissable-input:disabled, + .search-bar .dismissable-input:disabled:hover, + .search-bar .dismissable-input:disabled:focus, + .search-bar .dismissable-input:disabled:active { + background-color: var(--color-input-container-disabled); + border-color: var(--color-input-container-border-disabled); + color: var(--color-input-value-disabled); + cursor: not-allowed; + border-width: 1px; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .input-error .search-bar .dismissable-input { + background-color: var(--color-input-container-error); + border-color: var(--color-input-container-border-error); + color: var(--color-input-value); + border-radius: 4px; + border-width: 1px; + border-style: solid; + padding-left: 16px; + padding-right: 16px; + padding-top: 14px; + padding-bottom: 14px; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", + Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, + sans-serif; + font-size: 16px; + } + + .input-error .search-bar .dismissable-input:hover { + background-color: var(--color-input-container-error-hover); + border-color: var(--color-input-container-border-error-hover); + box-shadow: 0 0 0 1px var(--color-input-container-border-error-hover); + cursor: pointer; + border-width: 1px; + } + + .input-error .search-bar .dismissable-input:active { + background-color: var(--color-input-container-error-active); + border-color: var(--color-input-container-border-error-active); + cursor: pointer; + border-width: 1px; + } + + .input-error .search-bar .dismissable-input:disabled, + .input-error .search-bar .dismissable-input:disabled:hover, + .input-error .search-bar .dismissable-input:disabled:focus, + .input-error .search-bar .dismissable-input:disabled:active { + background-color: var(--color-input-container-error-disabled); + border-color: var(--color-input-container-border-error-disabled); + color: var(--color-input-value-disabled); + cursor: not-allowed; + border-width: 1px; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .base-search-bar .input-error .search-bar .dismissable-input.typeahead-input, + .base-search-bar .input-error .search-bar .dismissable-input.typeahead-input:active, + .base-search-bar .input-error .search-bar .dismissable-input.typeahead-input:focus-within { + border-style: solid; + padding-top: 0px; + padding-bottom: 0px; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + } + + @media (min-width: 768px) and (max-width: 991px) { + .search-bar .dismissable-input { + background-color: rgba(0, 0, 0, 0); + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .search-bar .dismissable-input:hover { + border-right-color: var(--color-border-faint); + } + } + + @media (min-width: 992px) { + .search-bar .dismissable-input { + width: 0px; + background-color: rgba(0, 0, 0, 0); + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .search-bar .dismissable-input:hover { + border-right-color: var(--color-border-faint); + } + } + + /* Mobile - Not Expanded */ + @media (max-width: 767px) { + .search-bar:not(.isExpanded) .base-search-bar__form { + display: none; + } + } + + /* Mobile - Expanded */ + @media screen and (max-width: 767px) { + @media (max-width: 767px) { + .search-bar.isExpanded .search-bar__placeholder { + display: none; + } + + .search-bar.isExpanded .base-search-bar__form { + display: flex; + } + } + + .search-bar.isExpanded { + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 1000; + margin-bottom: 0px; + height: 100%; + background-color: var(--color-background-container); + } + + .search-bar.isExpanded .switcher-tabs { + display: inherit; + } + } + + .search-bar[data-current-search-type="JOBS"] .base-search-bar[data-searchbar-type="JOBS"], + .search-bar[data-current-search-type="PEOPLE"] .base-search-bar[data-searchbar-type="PEOPLE"], + .search-bar[data-current-search-type="LEARNING"] .base-search-bar[data-searchbar-type="LEARNING"] { + display: flex; + } + + .search-bar[data-current-search-type="JOBS"] .base-search-bar[data-searchbar-type="PEOPLE"], + .search-bar[data-current-search-type="JOBS"] .base-search-bar[data-searchbar-type="LEARNING"], + .search-bar[data-current-search-type="PEOPLE"] .base-search-bar[data-searchbar-type="JOBS"], + .search-bar[data-current-search-type="PEOPLE"] .base-search-bar[data-searchbar-type="LEARNING"], + .search-bar[data-current-search-type="LEARNING"] .base-search-bar[data-searchbar-type="JOBS"], + .search-bar[data-current-search-type="LEARNING"] .base-search-bar[data-searchbar-type="PEOPLE"] { + display: none; + } + + /* Stuck styles */ + .stuck .search-bar__placeholder { + transition: + height 0.4s, + padding 0.4s, + margin-top 0.4s, + border-color 0.4s ease-in-out; + pointer-events: none; + margin: 0px; + height: 0px; + border-color: rgba(0, 0, 0, 0); + padding: 0px; + } + + @media screen and (max-width: 767px) { + .stuck .search-bar { + transition: + height 0.4s, + margin-bottom 0.4s ease-in-out; + margin-bottom: 0px; + height: 0px; + } + + /* Revert removal of styles when scrolling */ + .stuck .search-bar--minified-mobile .search-bar__placeholder { + max-height: initial; + pointer-events: initial; + border-width: 1px; + border-style: solid; + border-color: var(--color-border); + } + } + + /* Non Mobile Styles + * The default tab styles are bottom border. + * Papa/mama bear switcher tabs are vertical and have a left border + * Reset needed because of tailwind targetting adding both at once + */ + @media screen and (min-width: 767px) { + .switcher-tabs .switcher-tabs__button:after { + border-bottom: none; + } + } + + .show-more-less__button--hide { + display: none; + } + + /* Hide all
- */
+ .show-more-less__list--hide-after-0>li:nth-of-type(n + 1) {
+ display: none;
+ }
+
+ .show-more-less__list--hide-after-4>li:nth-of-type(n + 5) {
+ display: none;
+ }
+
+ .show-more-less__list--hide-after-6>li:nth-of-type(n + 7) {
+ display: none;
+ }
+
+ .show-more-less__list--hide-after-8>li:nth-of-type(n + 9) {
+ display: none;
+ }
+
+ .show-more-less__list--hide-after-10>li:nth-of-type(n + 11) {
+ display: none;
+ }
+
+ .show-more-less__list--hide-after-12>li:nth-of-type(n + 13) {
+ display: none;
+ }
+
+ .show-more-less__list--hide-after-24>li:nth-of-type(n + 25) {
+ display: none;
+ }
+
+ .show-more-less-text:not(.show-more-less-text--more) .show-more-less-text__text--less,
+ .show-more-less-text:not(.show-more-less-text--more) .show-more-less-text__button--more {
+ display: block;
+ }
+
+ .show-more-less-text:not(.show-more-less-text--more) .show-more-less-text__text--more,
+ .show-more-less-text:not(.show-more-less-text--more) .show-more-less-text__button--less {
+ display: none;
+ }
+
+ .show-more-less-text--more .show-more-less-text__text--less,
+ .show-more-less-text--more .show-more-less-text__button--more {
+ display: none;
+ }
+
+ .show-more-less-text--more .show-more-less-text__text--more,
+ .show-more-less-text--more .show-more-less-text__button--less {
+ display: block;
+ }
+
+ /**
+ * We use contextual class naming `--full-width` here as these classes may be conditionally removed
+ * depending on the success of client-side inclusions like GoogleSignInCta
+ */
+ .sign-in-form__footer--full-width {
+ flex-direction: column;
+ }
+
+ .sign-in-form__forgot-password--full-width {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ width: -moz-fit-content;
+ width: fit-content;
+ }
+
+ .sign-in-form__submit-btn--full-width {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
+
+ .slide-list__header-nav--minimal .slide-list__nav-wrap {
+ padding: 0px;
+ }
+
+ .slide-list__header-nav--minimal .slide-list__nav-button {
+ padding: 0px;
+ }
+
+ .slide-list__list--dragging {
+ transition: unset;
+ }
+
+ .slide-list__indicator--selected {
+ background-color: var(--color-text);
+ }
+
+ .sticky-header:not(.sticky-header--disabled) {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ z-index: 900;
+ width: 100%;
+ }
+
+ .tabs__list {
+ display: flex;
+ overflow-x: auto;
+ white-space: nowrap;
+ border-bottom-width: 1px;
+ border-style: solid;
+ border-color: var(--color-border-faint);
+ }
+
+ @media (max-width: 767px) {
+ .tabs__list {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ }
+
+ .toast--hidden {
+ z-index: -100;
+ min-height: 0px;
+ --tw-translate-y: 100%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ opacity: 0;
+ transition-property: color, background-color, border-color,
+ text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+ filter, backdrop-filter;
+ transition-duration: 916ms;
+ transition-timing-function: cubic-bezier(0.34, 0, 0.21, 1);
+ }
+
+ .toast--top.toast--hidden {
+ --tw-translate-y: -100%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ /* Todo: remove this once color inherit support is added in tailwind-mercado */
+ .cta-link,
+ .cta-link:hover,
+ .cta-link:active {
+ color: inherit;
+ }
+
+ .toggle__checkbox:not(:checked)+label .toggle__label-text--unchecked {
+ display: block;
+ }
+
+ .toggle__checkbox:not(:checked)+label .toggle__label-text--checked {
+ display: none;
+ }
+
+ .toggle__checkbox:checked+label .toggle__label-text--unchecked {
+ display: none;
+ }
+
+ .toggle__checkbox:checked+label .toggle__label-text--checked {
+ display: block;
+ }
+
+ .typeahead-input__dropdown-item {
+ border-top-width: 2px;
+ border-bottom-width: 2px;
+ border-style: solid;
+ border-color: rgba(0, 0, 0, 0);
+ }
+
+ .typeahead-input__dropdown:not(.typeahead-input__dropdown--show) {
+ pointer-events: none;
+ display: none;
+ opacity: 0;
+ }
+
+ .typeahead-input__dropdown.typeahead-input__dropdown--show {
+ pointer-events: auto;
+ display: flex;
+ opacity: 1;
+ }
+
+ @media (max-width: 767px) {
+ .typeahead-input__dropdown.typeahead-input__dropdown--show {
+ position: fixed;
+ top: 158px;
+ left: 0px;
+ width: 100vw;
+ min-width: 100vw;
+ }
+ }
+
+ .typeahead-input__dropdown-item--highlighted {
+ border-top-width: 2px;
+ border-bottom-width: 2px;
+ border-style: solid;
+ border-color: var(--color-container-primary);
+ background-color: var(--color-surface-new-hover);
+ }
+
+ .base-search-bar .input-error .typeahead-input.text-input,
+ .base-search-bar .input-error .typeahead-input.text-input:active,
+ .base-search-bar .input-error .typeahead-input.text-input:focus-within {
+ border-style: solid;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ }
+
+ @media (max-width: 767px) {
+ .base-search-bar .dismissable-input {
+ max-height: 40px;
+ }
+ }
+
+ .attributed-text-segment-list__content-truncated {
+ max-height: 6rem;
+ overflow: hidden;
+ line-height: 1.5;
+ }
+
+ .contextual-sign-in-modal__btn-container>* {
+ margin-bottom: 16px;
+ }
+
+ .contextual-sign-in-modal__continue-browse:visited {
+ color: var(--color-text-low-emphasis);
+ }
+
+ .contextual-sign-in-modal__continue-browse:hover {
+ color: var(--color-text);
+ }
+
+ .contextual-sign-in-modal__continue-browse:visited:hover {
+ color: var(--color-text);
+ }
+
+ .modal--contextual-sign-in .sign-in-modal__outlet-btn {
+ width: 100%;
+ }
+
+ .modal--contextual-sign-in .modal__wrapper {
+ margin-left: 24px;
+ margin-right: 24px;
+ height: auto;
+ max-width: 513px;
+ }
+
+ .modal--sign-in .modal__wrapper {
+ margin-left: 24px;
+ margin-right: 24px;
+ height: auto;
+ max-width: 513px;
+ }
+
+ .base-card--link.base-main-card:hover .base-main-card__title,
+ .base-card--link.base-main-card:focus .base-main-card__title {
+ text-decoration-line: underline;
+ }
+
+ .base-main-card__media>*:not(.play-button):not(.duration) {
+ /* TODO: add 'h-full' below after SEO A/B test concludes */
+ width: 100%;
+ object-fit: cover;
+ border-radius: inherit;
+ }
+
+ .base-main-card .duration {
+ bottom: 6px;
+ }
+
+ .base-main-card__info>* {
+ margin-bottom: 4px;
+ }
+
+ .base-main-card__media~.base-main-card__info {
+ margin-left: 16px;
+ }
+
+ @media (max-width: 767px) {
+ .base-main-card__media~.base-main-card__info {
+ margin-left: 0px;
+ margin-top: 16px;
+ }
+ }
+
+ /**
+ * metadata items on the same line (``) are middot separated
+ * consumers can full line separate by using `
`
+ */
+ span.base-main-card__metadata-item+span.base-main-card__metadata-item::before {
+ content: "\00b7";
+ margin: 0 4px;
+ }
+
+ .base-main-card____title,
+ .base-main-card__subtitle {
+ word-break: break-word;
+ word-wrap: break-word;
+ }
+
+ .main-rundown-news-card__description a {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-action);
+ }
+
+ .main-rundown-news-card__description strong {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text);
+ }
+
+ .main-rundown-news-card__description ul {
+ list-style-type: disc;
+ padding-left: 24px;
+ }
+
+ .ios .main-rundown-news-card__description a,
+ .ios .main-rundown-news-card__description strong {
+ font-weight: 600;
+ }
+
+ .core-section-container__content> :first-child {
+ margin-top: 8px;
+ }
+
+ .related-content-card--link:hover .related-content-card__title,
+ .related-content-card--link:focus .related-content-card__title {
+ text-decoration-line: underline;
+ }
+
+ /**
+ * metadata items on the same line (``) are middot separated
+ * consumers can full line separate by using ` `
+ */
+ span.related-content-card__metadata-item+span.related-content-card__metadata-item::before {
+ content: "\00b7";
+ margin: 0 4px;
+ }
+
+ .input-container {
+ position: relative;
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: 4px;
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .textinput-container label {
+ background-color: var(--color-background-container);
+ }
+
+ .mobile-input textarea:focus~label,
+ .mobile-input textarea.selected~label,
+ .mobile-input select.selected~label,
+ .mobile-input select:focus~label,
+ .mobile-input input:focus~label,
+ .mobile-input input.selected~label,
+ .mobile-input input:placeholder-shown~label {
+ top: 1px;
+ margin: 0px;
+ width: calc(100% - 32px);
+ padding-top: 3px;
+ font-size: 12px;
+ }
+
+ .icon-added.mobile-input textarea,
+ .icon-added.mobile-input input {
+ padding-left: 48px;
+ }
+
+ .input-error.mobile-input textarea,
+ .input-error.mobile-input input,
+ .input-error.mobile-input select {
+ --tw-shadow-color: var(--color-signal-negative);
+ --tw-shadow: var(--tw-shadow-colored);
+ }
+
+ .input-error.mobile-input textarea:focus,
+ .input-error.mobile-input input:focus,
+ .input-error.mobile-input select:focus {
+ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+ --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ --tw-shadow-color: var(--color-signal-negative);
+ --tw-shadow: var(--tw-shadow-colored);
+ }
+
+ .icon-added.mobile-input label {
+ left: 48px;
+ }
+
+ .input-container label {
+ position: absolute;
+ left: 16px;
+ top: 14px;
+ margin: 0px;
+ color: var(--color-text-low-emphasis);
+ transition-property: all;
+ transition-duration: 0.2s;
+ transition-timing-function: linear;
+ }
+
+ .input-container .icon-wrapper.left {
+ left: 0px;
+ }
+
+ .input-container .hints-container {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .mobile-input .helper-text {
+ margin-top: 0px;
+ color: var(--color-text-low-emphasis);
+ }
+
+ .mobile-input .text-area-counter {
+ color: var(--color-text-low-emphasis);
+ }
+
+ .input-error.mobile-input .helper-text,
+ .input-error.dropdown-container .right,
+ .mobile-input .error-icon,
+ .mobile-input [disabled]~.right,
+ .mobile-input [disabled]~.error-icon {
+ display: none;
+ }
+
+ .input-error.mobile-input .error-text,
+ .input-error.mobile-input .js-counter {
+ display: block;
+ color: var(--color-signal-negative);
+ }
+
+ .input-container:not(.input-error) .selected:not([disabled])~.right,
+ .mobile-input.input-error .error-icon {
+ z-index: 1;
+ display: flex;
+ }
+
+ .mobile-input .error-icon .icon {
+ color: var(--color-signal-negative);
+ }
+
+ .mobile-input .error-icon .\!icon {
+ color: var(--color-signal-negative);
+ }
+
+ .input-container .error-icon svg {
+ width: 24px;
+ }
+
+ .input-container .right path {
+ fill: var(--color-icon);
+ }
+
+ .dropdown-container:not(.input-error) .right {
+ z-index: -1;
+ display: flex;
+ }
+
+ .mobile-input .clear-btn svg {
+ height: 24px;
+ width: 24px;
+ }
+
+ .mobile-input .clear-btn path {
+ fill: var(--color-icon);
+ fill-opacity: 1;
+ }
+
+ /* disabled / readonly */
+ /* ToDo: based on tailwind-mercado discussion, need to update the
+ * CSS custom properties with theme generated class names */
+ .mobile-input [disabled],
+ .mobile-input [readonly] {
+ background-color: var(--color-input-container-disabled);
+ box-shadow: none;
+ color: var(--color-input-value-disabled);
+ }
+
+ .mobile-input [disabled]~label,
+ .mobile-input [readonly]~label {
+ color: var(--color-label-disabled);
+ }
+
+ /* When the label receives clicks/taps, it does not trigger the events
+ * on the form element, like opening select dropdown etc */
+ .mobile-input label {
+ pointer-events: none;
+ }
+
+ .dropdown-container [disabled]~.right {
+ display: flex;
+ color: var(--color-input-icon-disabled);
+ }
+
+ .mobile-input [disabled]~.text-container .helper-text,
+ .mobile-input [readonly]~.text-container .helper-text {
+ color: var(--color-input-helper-disabled);
+ }
+
+ .mobile-input [disabled]~.text-container .error-text,
+ .mobile-input [readonly]~.text-container .error-text {
+ color: var(--color-input-helper-error-disabled);
+ }
+
+ /* radio / checkbox */
+ input[type="checkbox"]:checked+icon::before {
+ --tw-shadow: 0 0 0 12px inset;
+ --tw-shadow-colored: inset 0 0 0 12px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ --tw-shadow-color: var(--color-checked);
+ --tw-shadow: var(--tw-shadow-colored);
+ }
+
+ /* ToDo: check with tailwind-mercado for theme classes for
+ * corresponding mercado token CSS custom property */
+ input[type="radio"]:checked+label::before {
+ box-shadow:
+ 0 0 0 6px var(--color-checked) inset,
+ 0 0 0 10px var(--color-element-shift-on-dark-flip) inset;
+ }
+
+ input[type="checkbox"]:checked+icon svg {
+ display: block;
+ color: var(--color-element-shift-on-dark-flip);
+ }
+
+ input[type="checkbox"]+icon::before,
+ input[type="radio"]+label::before {
+ content: "";
+ position: absolute;
+ top: 1px;
+ left: 2px;
+ display: block;
+ height: 16px;
+ width: 16px;
+ border-radius: 4px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgba(0, 0, 0, 0);
+ padding: 2px;
+ --tw-shadow: 0 0 0 1px inset;
+ --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ --tw-shadow-color: var(--color-border);
+ --tw-shadow: var(--tw-shadow-colored);
+ transition-property: box-shadow;
+ transition-duration: 167ms;
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+
+ input[type="radio"]+label::before {
+ left: 3px;
+ border-radius: 9999px;
+ }
+
+ .bottom-sheet {
+ transition-timing-function: linear;
+ /* `.ease-linear` is suggested class as per tailwind but it is not working */
+ }
+
+ .bottom-sheet.bottom-sheet-open {
+ bottom: 0;
+ }
+
+ .bottom-sheet.bottom-sheet-open .overlay {
+ position: fixed;
+ bottom: 0;
+ animation: fadein 300ms forwards;
+ }
+
+ /* bottom sheet overlay should fade in and out when the content slides up and down */
+ @keyframes fadein {
+ 0% {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes fadeout {
+ 0% {
+ opacity: 1;
+ bottom: 0;
+ }
+
+ /* fade out cannot be straight forward since the overlay has to fade out first and
+ then move behind the viewport to the bottom. Hence forcing bottom: 0 till the end */
+
+ 99% {
+ opacity: 0;
+ bottom: 0;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+ }
+
+ @keyframes dash {
+ 0% {
+ stroke-dasharray: 1, 70;
+ stroke-dashoffset: 0;
+ }
+
+ 50% {
+ stroke-dasharray: 63, 70;
+ stroke-dashoffset: -18;
+ }
+
+ 100% {
+ stroke-dasharray: 63, 70;
+ stroke-dashoffset: -67;
+ }
+ }
+
+ :root {
+ --mobile-nav-height: 48px;
+ }
+
+ .search-expanded .primary-nav {
+ display: none;
+ }
+
+ .ios.iphone-with-notch .primary-nav {
+ /* For Safari, depend on the environment variable, which takes care of
+ the bottom bar in Safari (that shows/hides on scroll).
+ For versions 11.0-11.2 'env' was not supported, so 'constant' */
+ height: calc(var(--mobile-nav-height) + constant(safe-area-inset-bottom));
+ height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
+ }
+
+ .search-expanded .secondary-nav {
+ padding: 0;
+ }
+
+ .search-expanded .secondary-nav-list,
+ .search-expanded .self-profile-logo {
+ display: none;
+ }
+
+ .search-expanded .nav-search-container {
+ margin: 0;
+ }
+
+ .window-scroll-threshold-met .secondary-nav {
+ transform: translateY(-51px);
+ }
+
+ .window-scroll-threshold-met .search-page-header .secondary-nav {
+ transform: none;
+ }
+
+ .search-expanded .typeahead-search-container {
+ z-index: 101;
+ margin-top: var(--mobile-nav-height);
+ }
+
+ .search-input-spinner {
+ transform: translateY(-50%);
+ }
+
+ .search-input-spinner .loader__container {
+ margin: 0;
+ }
+
+ .search-input-spinner svg {
+ width: 16px;
+ height: 16px;
+ min-width: 16px;
+ min-height: 16px;
+ }
+
+ .search-expanded .search-keyword-icon {
+ display: none;
+ }
+
+ .search-expanded .nav-back-button {
+ display: inline-block;
+ border-width: 0;
+ background-color: var(--color-background-none);
+ margin: 0;
+ height: var(--mobile-nav-height);
+ }
+
+ .search-expanded .nav-search-text {
+ padding: 0 8px 0 24px;
+ width: calc(100% - 96px);
+ background-color: var(--color-background-container);
+ }
+
+ .search-text::-webkit-search-cancel-button {
+ display: none;
+ }
+
+ .image-viewer-modal.hide-components .modal__dismiss,
+ .image-viewer-modal.hide-components .detail-section {
+ visibility: hidden;
+ opacity: 0;
+ margin-bottom: -4000px;
+ transition:
+ visibility 0s 0.5s,
+ opacity 0.5s linear,
+ margin-bottom 0s 0.5s;
+ }
+
+ .image-viewer-modal .detail-section a.link,
+ .image-viewer-modal .detail-section span {
+ color: var(--color-action-on-dark) !important;
+ }
+
+ .image-viewer-modal .detail-section p,
+ .image-viewer-modal .detail-section a {
+ color: var(--color-text-on-dark);
+ }
+
+ .image-viewer-modal .detail-section .detail-section-feed-content {
+ color: var(--color-text-low-emphasis-on-dark);
+ }
+
+ .image-viewer-modal .detail-section .reactions-menu-list {
+ border: 1px solid var(--color-border-on-dark);
+ background: var(--color-background-canvas-dark);
+ }
+
+ .image-viewer-modal .detail-section button {
+ color: var(--color-text-on-dark);
+ background: var(--color-background-canvas-dark);
+ }
+
+ .image-viewer-modal .detail-section icon svg {
+ color: var(--color-icon-on-dark);
+ }
+
+ .share-settings:checked~label .visibility-icon,
+ .comments-settings:checked~label .visibility-icon {
+ color: var(--color-checked);
+ }
+
+ .share-settings:checked~label .icon-check,
+ .comments-settings:checked~label .icon-check {
+ visibility: visible;
+ color: var(--color-checked);
+ }
+
+ #share-modal .reshare-section .activity-feed-item {
+ border-radius: 8px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-border-faint);
+ }
+
+ #share-modal .textarea:empty::after {
+ color: var(--color-text-low-emphasis);
+ --tw-content: attr(data-placeholder);
+ content: var(--tw-content);
+ }
+
+ #share-modal progress[value]::-webkit-progress-bar {
+ height: 4px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-border);
+ background-color: var(--color-background-none);
+ }
+
+ #share-modal progress[value]::-webkit-progress-value {
+ background-color: var(--color-action);
+ transition-property: width;
+ transition-duration: 300ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .image-preview-wrapper[data-image-load-state="empty"] {
+ display: none;
+ }
+
+ .image-preview-wrapper[data-image-load-state="loaded"] .remove-image-preview,
+ .image-preview-wrapper[data-image-load-state="loaded"] .multiple-images-preview-container {
+ display: flex;
+ }
+
+ #share-modal .multiple-images-preview-container {
+ display: flex;
+ height: 300px;
+ flex-wrap: wrap;
+ }
+
+ #share-modal .multiple-images-preview-container.single-image-preview {
+ height: auto;
+ }
+
+ #share-modal .multiple-images-preview-container .image-tile {
+ display: flex;
+ height: 40%;
+ width: 30%;
+ flex-grow: 1;
+ justify-content: center;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-surface);
+ background-color: var(--color-surface);
+ }
+
+ #share-modal .multiple-images-preview-container .image-tile.image-tile-1 {
+ height: 60%;
+ width: 100%;
+ }
+
+ #share-modal .single-image-preview .image-tile.image-tile-1 .feed-preview-image {
+ max-height: 225px;
+ width: auto;
+ max-width: 100%;
+ align-self: flex-start;
+ border-radius: 2px;
+ object-fit: contain;
+ }
+
+ #share-modal .image-preview-wrapper .single-image-preview .feed-preview-image.landscape {
+ max-height: 450px;
+ transition-property: max-height;
+ transition-duration: 300ms;
+ transition-timing-function: cubic-bezier(1, 0, 1, 0);
+ }
+
+ #share-modal .two-images-preview .image-tile.image-tile-1,
+ #share-modal .two-images-preview .image-tile.image-tile-2 {
+ height: 100%;
+ width: 50%;
+ }
+
+ #share-modal .multiple-images-preview-container .image-tile .feed-preview-image {
+ width: 100%;
+ object-fit: cover;
+ transition-property: filter;
+ transition-duration: 250ms;
+ transition-timing-function: ease-in;
+ }
+
+ #share-modal .five-images-preview .image-tile.image-tile-1 {
+ width: 50%;
+ }
+
+ #share-modal .five-images-preview .image-tile.image-tile-2 {
+ height: 60%;
+ width: 50%;
+ }
+
+ #share-modal .multiple-images-preview-container.images-overflow .image-tile-5 {
+ position: relative;
+ }
+
+ #share-modal .multiple-images-preview-container.images-overflow .image-tile-5::before {
+ position: absolute;
+ display: flex;
+ height: 100%;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--color-scrim);
+ font-size: 2.4rem;
+ color: var(--color-text-on-dark);
+ --tw-content: "+" attr(data-remaining-images);
+ content: var(--tw-content);
+ }
+
+ #share-modal .progress-overlay[data-progress-overlay-state="visible"] {
+ display: flex;
+ }
+
+ #share-modal .modal-content .share-feed-item .preview-link .post-link[href] {
+ border-radius: 8px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-divider);
+ background-color: var(--color-surface-tint);
+ padding: 8px;
+ }
+
+ #share-modal .recommendations.reveal {
+ opacity: 1;
+ }
+
+ #share-modal .recommendations.reveal-animation {
+ transition-property: opacity;
+ transition-delay: 200ms;
+ transition-duration: 50ms;
+ transition-timing-function: linear;
+ }
+
+ #share-modal .modal-content .textarea .entity {
+ font-weight: 600;
+ color: var(--color-text);
+ }
+
+ #share-modal .modal-content .textarea .\!entity {
+ font-weight: 600;
+ color: var(--color-text);
+ }
+
+ #share-modal .modal-content .post-settings-wrapper[data-post-visibility="public"] .public {
+ display: flex;
+ }
+
+ #share-modal .modal-content .post-settings-wrapper[data-post-visibility="network"] .network {
+ display: flex;
+ }
+
+ #visibility-settings-modal input[type="radio"]:checked+label::before {
+ --tw-content: none;
+ content: var(--tw-content);
+ }
+
+ #visibility-settings-modal input[type="radio"]+label::before {
+ --tw-content: none;
+ content: var(--tw-content);
+ }
+
+ .form-modal-description__content-truncated {
+ max-height: 4rem;
+ overflow: hidden;
+ line-height: 1.5;
+ }
+
+ .newsletter-article-content__article-image {
+ margin-left: -16px;
+ width: calc(100% + 32px);
+ }
+
+ .newsletter-article-content__ghost-image {
+ /* Important added to object-contain to add specificity over the object-fit included on Feed media */
+ display: inline-block;
+ height: 400px;
+ background-color: var(--color-background-container-tint);
+ object-fit: contain !important;
+ }
+
+ .background-frame {
+ /* TODO: add this once the assetUrl issue is resolved */
+ /* @apply after:content-[''] after:block after:absolute after:w-full after:h-full after:inset-0 after:bg-[length:100%_100%] after:bg-no-repeat after:pointer-events-none; */
+ overflow: hidden;
+ border-style: solid;
+ border-color: #56687a;
+ }
+
+ .frame-desktop {
+ width: 100%;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #f2f2f2;
+ }
+
+ /* TODO: add after:bg-ios-device pt-[44px] px-[16px] pb-[12px] */
+ .frame-ios {
+ height: 844px;
+ width: 390px;
+ border-radius: 48px;
+ border-width: 16px;
+ }
+
+ /* TODO: add after:bg-android-device pt-[48px] px-[16px] pb-[24px] */
+ .frame-android {
+ height: 851px;
+ width: 393px;
+ border-radius: 40px;
+ border-left-width: 10px;
+ border-right-width: 10px;
+ border-top-width: 50px;
+ border-bottom-width: 20px;
+ }
+
+ .preview-tool-select {
+ position: relative;
+ box-sizing: border-box;
+ height: 32px;
+ width: 100%;
+ appearance: none;
+ border-radius: 4px;
+ border-color: var(--color-border-active);
+ background-color: rgba(0, 0, 0, 0);
+ padding-left: 8px;
+ padding-right: 8px;
+ font-weight: 400;
+ color: var(--color-text);
+ outline-width: 0px;
+ }
+
+ .job-card-flavor__container {
+ display: inline-block;
+ padding-top: 4px;
+ padding-right: 24px;
+ }
+
+ .job-card-flavor__detail {
+ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+ Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans",
+ Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial,
+ sans-serif;
+ font-size: 12px;
+ line-height: 1.25;
+ color: #666666;
+ }
+
+ .series-article-body {
+ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+ Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans",
+ Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial,
+ sans-serif;
+ font-size: 16px;
+ }
+
+ .series-article-body h2 {
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: 1em;
+ margin-bottom: 0.5em;
+ font-size: 1.5em;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ }
+
+ .series-article-body h3 {
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: 1em;
+ margin-bottom: 0.5em;
+ font-size: 1.17em;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ }
+
+ .series-article-body h2 strong,
+ .series-article-body h3 strong {
+ font-weight: 500;
+ }
+
+ .series-article-body p {
+ margin-top: 0.8em;
+ font-size: 1em;
+ line-height: 1.5;
+ }
+
+ .series-article-body em {
+ font-style: italic;
+ }
+
+ .series-article-body a {
+ display: inline;
+ cursor: pointer;
+ font-weight: 600;
+ color: var(--color-action);
+ text-decoration-line: none;
+ }
+
+ .series-article-body ol,
+ .series-article-body ul {
+ margin-top: 1em;
+ margin-right: 0px;
+ margin-bottom: 0px;
+ margin-left: 1.5em;
+ display: block;
+ padding: 0px;
+ }
+
+ .series-article-body li {
+ margin-left: 1em;
+ font-size: 1em;
+ line-height: 1.5;
+ letter-spacing: -0.15%;
+ color: #282828;
+ }
+
+ .series-article-body blockquote,
+ .series-article-body q {
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+ margin-left: 0px;
+ margin-right: 0px;
+ display: block;
+ border-width: 0;
+ border-left-width: 4px;
+ border-style: solid;
+ border-left-color: #424242;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ padding-right: 0px;
+ padding-left: 1.5em;
+ font-size: 1em;
+ font-style: italic;
+ line-height: 1.5;
+ color: #282828;
+ }
+
+ .series-article-body pre {
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+ margin-left: 0px;
+ margin-right: 0px;
+ display: block;
+ overflow-x: auto;
+ white-space: pre-wrap;
+ border-radius: 4px;
+ background-color: #38434f;
+ padding: 32px;
+ font-family: monospace;
+ line-height: 1.25;
+ color: #ffffff;
+ }
+
+ .series-article-body figure figcaption {
+ margin-top: 0.8em;
+ text-align: center;
+ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+ Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans",
+ Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial,
+ sans-serif;
+ font-size: 12px;
+ line-height: 1.5;
+ color: var(--color-text-low-emphasis);
+ }
+
+ .series-article-body img {
+ margin-top: 1em;
+ display: block;
+ max-width: 100%;
+ }
+
+ .series-article-body pre span.hljs-keyword {
+ color: #17afb8;
+ }
+
+ .series-article-body pre span.hljs-string,
+ .series-article-body pre span.hljs-number {
+ color: #e61e89;
+ }
+
+ .series-article-body .email_iframe_replacement a {
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: 1em;
+ margin-bottom: 2em;
+ display: block;
+ border-radius: 34px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-action);
+ background-color: #ffffff;
+ padding-top: 0.8em;
+ padding-bottom: 0.8em;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ text-align: center;
+ font-size: 1em;
+ font-weight: 400;
+ line-height: 1.25;
+ color: var(--color-action);
+ text-decoration-line: none;
+ mso-table-rspace: 0pt;
+ mso-table-lspace: 0pt;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ -moz-text-size-adjust: 100%;
+ -o-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ }
+
+ .series-article-body .email-iframe-wrapper {
+ margin-top: 1em;
+ width: 100%;
+ background-color: var(--color-background-container-tint);
+ text-align: center;
+ }
+
+ .series-article-body .email-iframe-td-padding-top {
+ padding-top: 64px;
+ }
+
+ .series-article-body .email-iframe-td-padding-middle {
+ padding-top: 16px;
+ }
+
+ .series-article-body .email-iframe-image {
+ margin: auto;
+ height: 64px;
+ width: 64px;
+ }
+
+ .series-article-body .email-iframe-button {
+ display: inline-block;
+ border-radius: 34px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-action);
+ padding-top: 0.4em;
+ padding-bottom: 0.4em;
+ padding-left: 1em;
+ padding-right: 1em;
+ text-align: center;
+ font-size: 1em;
+ font-weight: 600;
+ line-height: 1.25;
+ color: var(--color-action);
+ text-decoration-line: none;
+ }
+
+ .series-article-body .email-iframe-td-padding-bottom {
+ padding-bottom: 64px;
+ }
+
+ .comment__body,
+ .comment__body button {
+ background-color: var(--color-background-canvas);
+ }
+
+ .dark .comment__body,
+ .dark .comment__body button {
+ background-color: #293138;
+ }
+
+ .comment__body #comment-image-modal button {
+ background-color: var(--color-background-none);
+ }
+
+ .tw-feed-content-ghost-image {
+ /* Important added to object-contain to add specificity over the object-fit included on Feed media */
+ display: inline-block;
+ height: 400px;
+ background-color: var(--color-background-container-tint);
+ object-fit: contain !important;
+ }
+
+ .tw-feed-content-title {
+ margin: 0px;
+ padding: 0px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text);
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ }
+
+ .tw-feed-content-subtitle {
+ font-size: 12px !important;
+ color: var(--color-text-low-emphasis);
+ }
+
+ .w-main-feed-card-media {
+ margin-left: -16px;
+ width: calc(100% + 32px);
+ }
+
+ @media (max-width: 767px) {
+ .mx-main-feed-card-no-gutter {
+ margin-left: -16px;
+ margin-right: -16px;
+ }
+ }
+
+ @media (min-width: 768px) and (max-width: 991px) {
+ .mx-main-feed-card-no-gutter {
+ margin-left: -16px;
+ margin-right: -16px;
+ }
+ }
+
+ @media (max-width: 767px) {
+ .px-main-feed-card-no-gutter {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ }
+
+ @media (min-width: 768px) and (max-width: 991px) {
+ .px-main-feed-card-no-gutter {
+ margin-left: -16px;
+ margin-right: -16px;
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ }
+
+ .main-feed-reshare-card .share-article {
+ border-style: none;
+ }
+
+ .share-update-card__ellipsis-menu--no-actor {
+ position: initial;
+ }
+
+ .share-update-card__ellipsis-menu--no-actor .ellipsis-menu__trigger {
+ margin-left: auto;
+ }
+
+ .tw-feed-native-video-compact-overlay__top-bar::before {
+ background: linear-gradient(180deg,
+ rgba(0, 0, 0, 0.7) 50%,
+ transparent 100%);
+ transition: opacity 500ms ease-in-out;
+ }
+
+ .tw-feed-native-video-compact-overlay__top-bar-item {
+ z-index: 400;
+ }
+
+ .tw-feed-native-video-compact-overlay__top-bar-item-like:hover,
+ .tw-feed-native-video-compact-overlay__top-bar-item-like:visited,
+ .tw-feed-native-video-compact-overlay__top-bar-item-like:visited:hover,
+ .tw-feed-native-video-compact-overlay__top-bar .embedded-social-share .modal__outlet--outlet-button-square,
+ .tw-feed-native-video-compact-overlay__top-bar .embedded-social-share .social-action-bar__icon--svg {
+ color: var(--color-text-shift-on-dark-flip);
+ }
+
+ .tw-feed-native-video-compact-overlay__bottombar {
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
+ }
+
+ .video-entity--play .tw-feed-native-video-compact-overlay__top-bar {
+ display: none;
+ }
+
+ .video-entity--play .tw-feed-native-video-compact-overlay__bottombar,
+ .video-entity--ended .tw-feed-native-video-compact-overlay__bottombar,
+ .video-entity--pause .tw-feed-native-video-compact-overlay__bottombar {
+ display: none;
+ }
+
+ .tw-feed-native-video-content__compact-media .video-js {
+ height: 100%;
+ }
+
+ .tw-feed-native-video-compact-overlay__play-preview-icon {
+ transition-duration: 167ms;
+ transition-property: background-color, box-shadow, color;
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+
+ .tw-feed-native-video-compact-overlay__play-preview-icon>icon>svg {
+ margin: auto;
+ display: block;
+ }
+
+ .video-entity--loaded .tw-feed-native-video-compact-overlay__bottombar,
+ .video-entity--loaded .tw-feed-native-video-compact-overlay__preview {
+ display: none;
+ }
+
+ .dismissable-input--focus {
+ border-color: var(--color-action);
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ }
+
+ .dismissable-input--focus:hover {
+ border-color: var(--color-action);
+ }
+
+ .dismissable-input--focus .dismissable-input__button--show {
+ opacity: 0.6;
+ }
+
+ .dismissable-input__button--show {
+ visibility: visible;
+ cursor: pointer;
+ }
+
+ .dismissable-input__button--show:hover {
+ opacity: 1;
+ }
+
+ .dismissable-input__input {
+ /* override safari input defaults */
+ -webkit-appearance: none;
+ appearance: none;
+ }
+
+ .dismissable-input__input[placeholder] {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ /* clears the 'X' from Chrome */
+ .dismissable-input__input::-webkit-search-decoration,
+ .dismissable-input__input::-webkit-search-cancel-button,
+ .dismissable-input__input::-webkit-search-results-button,
+ .dismissable-input__input::-webkit-search-results-decoration {
+ display: none;
+ }
+
+ .filter .collapsible-dropdown__list {
+ margin-top: 8px;
+ max-height: calc(100vh - 200px);
+ min-width: 265px;
+ overflow: auto;
+ }
+
+ @media (min-width: 992px) {
+ .filter .collapsible-dropdown__list {
+ max-height: 400px;
+ }
+ }
+
+ @media (forced-colors: active) {
+ .filter-button--selected {
+ border-width: 4px;
+ }
+ }
+
+ /* Utilities */
+ /* All files must be wrapped with `@layer utilities { ... }` */
+ /* Components */
+ /* All files must be wrapped with `@layer components { ... }` */
+ /* TODO: create a reusable utility which could be used across */
+ /* Migrate the same css from flock-template content-preview */
+ /* https://jarvis.corp.linkedin.com/codesearch/result/?path=flock-templates%2Fflock%2Femail%2Femail_series_follow_newsletter_01%2Fpartials%2Fnectar&reponame=flock-templates%2Fflock-templates&name=typography_css.tl */
+ /* This is an anti-pattern and should be treated as exception
+ this should be replaced with actual color token when it is available.
+ jira01.corp.linkedin.com:8443/browse/HUED-19227
+ */
+ .placeholder\:pl-2::placeholder {
+ padding-left: 16px;
+ }
+
+ .placeholder\:text-color-text-secondary::placeholder {
+ color: var(--color-text-secondary);
+ }
+
+ .before\:pointer-events-none::before {
+ content: var(--tw-content);
+ pointer-events: none;
+ }
+
+ .before\:absolute::before {
+ content: var(--tw-content);
+ position: absolute;
+ }
+
+ .before\:top-0::before {
+ content: var(--tw-content);
+ top: 0px;
+ }
+
+ .before\:bottom-auto::before {
+ content: var(--tw-content);
+ bottom: auto;
+ }
+
+ .before\:left-0::before {
+ content: var(--tw-content);
+ left: 0px;
+ }
+
+ .before\:top-\[calc\(50\%-1px\)\]::before {
+ content: var(--tw-content);
+ top: calc(50% - 1px);
+ }
+
+ .before\:left-\[calc\(50\%-1px\)\]::before {
+ content: var(--tw-content);
+ left: calc(50% - 1px);
+ }
+
+ .before\:z-4::before {
+ content: var(--tw-content);
+ z-index: 400;
+ }
+
+ .before\:\!mx-\[0\]::before {
+ content: var(--tw-content);
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ .before\:h-8::before {
+ content: var(--tw-content);
+ height: 64px;
+ }
+
+ .before\:w-full::before {
+ content: var(--tw-content);
+ width: 100%;
+ }
+
+ .before\:rounded-full::before {
+ content: var(--tw-content);
+ border-radius: 9999px;
+ }
+
+ .before\:border-1::before {
+ content: var(--tw-content);
+ border-width: 1px;
+ }
+
+ .before\:border-solid::before {
+ content: var(--tw-content);
+ border-style: solid;
+ }
+
+ .before\:border-white-a90::before {
+ content: var(--tw-content);
+ border-color: rgba(255, 255, 255, 0.9);
+ }
+
+ .before\:border-color-icon-on-dark::before {
+ content: var(--tw-content);
+ border-color: var(--color-icon-on-dark);
+ }
+
+ .before\:text-color-text-low-emphasis::before {
+ content: var(--tw-content);
+ color: var(--color-text-low-emphasis);
+ }
+
+ .before\:content-\[\'\'\]::before {
+ --tw-content: "";
+ content: var(--tw-content);
+ }
+
+ .before\:middot::before {
+ content: "\00b7";
+ margin: 0 4px;
+ }
+
+ .after\:pointer-events-none::after {
+ content: var(--tw-content);
+ pointer-events: none;
+ }
+
+ .after\:absolute::after {
+ content: var(--tw-content);
+ position: absolute;
+ }
+
+ .after\:top-0::after {
+ content: var(--tw-content);
+ top: 0px;
+ }
+
+ .after\:right-0::after {
+ content: var(--tw-content);
+ right: 0px;
+ }
+
+ .after\:bottom-0::after {
+ content: var(--tw-content);
+ bottom: 0px;
+ }
+
+ .after\:left-0::after {
+ content: var(--tw-content);
+ left: 0px;
+ }
+
+ .after\:ml-0\.5::after {
+ content: var(--tw-content);
+ margin-left: 4px;
+ }
+
+ .after\:ml-0::after {
+ content: var(--tw-content);
+ margin-left: 0px;
+ }
+
+ .after\:ml-\[74px\]::after {
+ content: var(--tw-content);
+ margin-left: 74px;
+ }
+
+ .after\:block::after {
+ content: var(--tw-content);
+ display: block;
+ }
+
+ .after\:h-full::after {
+ content: var(--tw-content);
+ height: 100%;
+ }
+
+ .after\:\!h-\[37px\]::after {
+ content: var(--tw-content);
+ height: 37px !important;
+ }
+
+ .after\:border-1::after {
+ content: var(--tw-content);
+ border-width: 1px;
+ }
+
+ .after\:border-solid::after {
+ content: var(--tw-content);
+ border-style: solid;
+ }
+
+ .after\:border-color-divider::after {
+ content: var(--tw-content);
+ border-color: var(--color-divider);
+ }
+
+ .after\:bg-gradient-to-b::after {
+ content: var(--tw-content);
+ background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+ }
+
+ .after\:from-color-transparent::after {
+ content: var(--tw-content);
+ --tw-gradient-from: rgba(0, 0, 0, 0);
+ --tw-gradient-to: rgb(0 0 0 / 0);
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+ }
+
+ .after\:to-color-background-scrim::after {
+ content: var(--tw-content);
+ --tw-gradient-to: var(--color-background-scrim);
+ }
+
+ .after\:text-sm::after {
+ content: var(--tw-content);
+ font-size: 14px;
+ }
+
+ .after\:text-color-text-low-emphasis::after {
+ content: var(--tw-content);
+ color: var(--color-text-low-emphasis);
+ }
+
+ .after\:no-underline::after {
+ content: var(--tw-content);
+ text-decoration-line: none;
+ }
+
+ .after\:content-\[\'\/\'\]::after {
+ --tw-content: "/";
+ content: var(--tw-content);
+ }
+
+ .after\:content-\[\"\"\]::after {
+ --tw-content: "";
+ content: var(--tw-content);
+ }
+
+ .after\:content-\[\'\'\]::after {
+ --tw-content: "";
+ content: var(--tw-content);
+ }
+
+ .after\:up-down-divider::after {
+ display: flex;
+ height: 100%;
+ width: 1px;
+ align-items: center;
+ background-color: var(--color-border-low-emphasis);
+ text-align: center;
+ --tw-content: "";
+ content: var(--tw-content);
+ }
+
+ .first\:ml-0:first-child {
+ margin-left: 0px;
+ }
+
+ .last\:mb-0:last-child {
+ margin-bottom: 0px;
+ }
+
+ .last\:mr-0:last-child {
+ margin-right: 0px;
+ }
+
+ .last\:flex:last-child {
+ display: flex;
+ }
+
+ .last\:after\:hidden:last-child::after {
+ content: var(--tw-content);
+ display: none;
+ }
+
+ .first-of-type\:ml-0:first-of-type {
+ margin-left: 0px;
+ }
+
+ .first-of-type\:border-none:first-of-type {
+ border-style: none;
+ }
+
+ .visited\:text-color-text:visited {
+ color: var(--color-text);
+ }
+
+ .visited\:text-color-text-low-emphasis:visited {
+ color: var(--color-text-low-emphasis);
+ }
+
+ .visited\:text-color-text-secondary:visited {
+ color: var(--color-text-secondary);
+ }
+
+ .visited\:text-color-label:visited {
+ color: var(--color-label);
+ }
+
+ .visited\:no-underline:visited {
+ text-decoration-line: none;
+ }
+
+ .hover\:cursor-pointer:hover {
+ cursor: pointer;
+ }
+
+ .hover\:border-1:hover {
+ border-width: 1px;
+ }
+
+ .hover\:border-y-2:hover {
+ border-top-width: 2px;
+ border-bottom-width: 2px;
+ }
+
+ .hover\:border-solid:hover {
+ border-style: solid;
+ }
+
+ .hover\:border-color-link:hover {
+ border-color: var(--color-link);
+ }
+
+ .hover\:border-color-container-primary:hover {
+ border-color: var(--color-container-primary);
+ }
+
+ .hover\:bg-color-background-container-tint:hover {
+ background-color: var(--color-background-container-tint);
+ }
+
+ .hover\:bg-color-action:hover {
+ background-color: var(--color-action);
+ }
+
+ .hover\:bg-color-surface-new-hover:hover {
+ background-color: var(--color-surface-new-hover);
+ }
+
+ .hover\:bg-white-a04:hover {
+ background-color: rgba(255, 255, 255, 0.04);
+ }
+
+ .hover\:bg-white:hover {
+ background-color: #ffffff;
+ }
+
+ .hover\:bg-color-surface-tint:hover {
+ background-color: var(--color-surface-tint);
+ }
+
+ .hover\:bg-blue-70:hover {
+ background-color: #0a66c2;
+ }
+
+ .hover\:text-color-link-hover:hover {
+ color: var(--color-link-hover);
+ }
+
+ .hover\:text-color-text-on-dark:hover {
+ color: var(--color-text-on-dark);
+ }
+
+ .hover\:text-color-text:hover {
+ color: var(--color-text);
+ }
+
+ .hover\:\!text-color-text:hover {
+ color: var(--color-text) !important;
+ }
+
+ .hover\:text-white:hover {
+ color: #ffffff;
+ }
+
+ .hover\:underline:hover {
+ text-decoration-line: underline;
+ }
+
+ .hover\:no-underline:hover {
+ text-decoration-line: none;
+ }
+
+ .hover\:shadow-\[0_4px_12px\]:hover {
+ --tw-shadow: 0 4px 12px;
+ --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ }
+
+ .hover\:shadow-color-shadow:hover {
+ --tw-shadow-color: var(--color-shadow);
+ --tw-shadow: var(--tw-shadow-colored);
+ }
+
+ .hover\:show-play-button.base-card:hover .play-button {
+ z-index: 1;
+ opacity: 1;
+ }
+
+ .visited\:hover\:text-color-text:hover:visited {
+ color: var(--color-text);
+ }
+
+ .hover\:visited\:text-color-label:visited:hover {
+ color: var(--color-label);
+ }
+
+ .focus\:top-0:focus {
+ top: 0px;
+ }
+
+ .focus\:link-styled:focus,
+ .focus\:link-styled:focus:visited,
+ .focus\:link-styled:focus:link,
+ .focus\:link-styled:focus:link:visited {
+ font-weight: 600;
+ color: var(--color-text);
+ }
+
+ .focus\:link-styled:focus:hover,
+ .focus\:link-styled:focus:visited:hover,
+ .focus\:link-styled:focus:link:hover,
+ .focus\:link-styled:focus:link:visited:hover {
+ color: var(--color-link-hover);
+ }
+
+ .focus\:link-styled:focus:active,
+ .focus\:link-styled:focus:visited:active,
+ .focus\:link-styled:focus:link:active,
+ .focus\:link-styled:focus:link:visited:active {
+ color: var(--color-link-active);
+ }
+
+ .focus\:bg-color-background-container-tint:focus {
+ background-color: var(--color-background-container-tint);
+ }
+
+ .focus\:bg-color-action:focus {
+ background-color: var(--color-action);
+ }
+
+ .focus\:text-color-text-on-dark:focus {
+ color: var(--color-text-on-dark);
+ }
+
+ .focus\:underline:focus {
+ text-decoration-line: underline;
+ }
+
+ .focus\:no-underline:focus {
+ text-decoration-line: none;
+ }
+
+ .focus\:opacity-100:focus {
+ opacity: 1;
+ }
+
+ .focus\:outline-none:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ }
+
+ .focus\:outline:focus {
+ outline-style: solid;
+ }
+
+ .focus\:outline-dotted:focus {
+ outline-style: dotted;
+ }
+
+ .focus\:outline-2:focus {
+ outline-width: 2px;
+ }
+
+ .focus\:outline-1:focus {
+ outline-width: 1px;
+ }
+
+ .focus\:outline-0:focus {
+ outline-width: 0px;
+ }
+
+ .focus\:outline-color-action:focus {
+ outline-color: var(--color-action);
+ }
+
+ .focus\:show-play-button.base-card:focus .play-button {
+ z-index: 1;
+ opacity: 1;
+ }
+
+ .hover\:focus\:text-color-label:focus:hover {
+ color: var(--color-label);
+ }
+
+ .active\:bg-color-background-container-tint:active {
+ background-color: var(--color-background-container-tint);
+ }
+
+ .active\:no-underline:active {
+ text-decoration-line: none;
+ }
+
+ .disabled\:invisible:disabled {
+ visibility: hidden;
+ }
+
+ .disabled\:hidden:disabled {
+ display: none;
+ }
+
+ .disabled\:text-color-text-disabled:disabled {
+ color: var(--color-text-disabled);
+ }
+
+ .group:hover .group-hover\:visible {
+ visibility: visible;
+ }
+
+ .group:hover .group-hover\:-translate-y-25\% {
+ --tw-translate-y: -25%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .group:hover .group-hover\:scale-150 {
+ --tw-scale-x: 1.5;
+ --tw-scale-y: 1.5;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .group:hover .group-hover\:cursor-pointer {
+ cursor: pointer;
+ }
+
+ .group:hover .group-hover\:\!text-color-text-solid-active {
+ color: var(--color-text-solid-active) !important;
+ }
+
+ .group:hover .group-hover\:opacity-100 {
+ opacity: 1;
+ }
+
+ .group:focus .group-focus\:visible {
+ visibility: visible;
+ }
+
+ .group:focus .group-focus\:-translate-y-25\% {
+ --tw-translate-y: -25%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .group:focus .group-focus\:scale-150 {
+ --tw-scale-x: 1.5;
+ --tw-scale-y: 1.5;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .group:focus .group-focus\:opacity-100 {
+ opacity: 1;
+ }
+
+ .group:active .group-active\:visible {
+ visibility: visible;
+ }
+
+ .group:active .group-active\:-translate-y-25\% {
+ --tw-translate-y: -25%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .group:active .group-active\:scale-150 {
+ --tw-scale-x: 1.5;
+ --tw-scale-y: 1.5;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .group:active .group-active\:opacity-100 {
+ opacity: 1;
+ }
+
+ .peer:checked~.peer-checked\:text-color-container-checked {
+ color: var(--color-container-checked);
+ }
+
+ .link\:no-underline:link {
+ text-decoration-line: none;
+ }
+
+ [dir="rtl"] .rtl\:ml-2 {
+ margin-left: 16px;
+ }
+
+ [dir="rtl"] .rtl\:translate-x-\[7px\] {
+ --tw-translate-x: 7px;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ [dir="rtl"] .rtl\:-scale-x-100 {
+ --tw-scale-x: -1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ @media (max-width: 767px) {
+ .babybear\:invisible {
+ visibility: hidden;
+ }
+
+ .babybear\:static {
+ position: static;
+ }
+
+ .babybear\:right-4 {
+ right: 32px;
+ }
+
+ .babybear\:bottom-0 {
+ bottom: 0px;
+ }
+
+ .babybear\:left-3 {
+ left: 24px;
+ }
+
+ .babybear\:-top-1 {
+ top: -8px;
+ }
+
+ .babybear\:z-0 {
+ z-index: 0;
+ }
+
+ .babybear\:btn-sm {
+ height: min-content;
+ min-height: 32px;
+ border-radius: 24px;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ padding-left: 16px;
+ padding-right: 16px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ .babybear\:btn-sm,
+ .babybear\:btn-sm:visited,
+ .babybear\:btn-sm:focus {
+ cursor: pointer;
+ text-decoration-line: none;
+ }
+
+ .babybear\:btn-sm:hover,
+ .babybear\:btn-sm:visited:hover {
+ text-decoration-line: none;
+ }
+
+ .babybear\:btn-sm:disabled {
+ cursor: not-allowed;
+ }
+
+ .babybear\:m-0 {
+ margin: 0px;
+ }
+
+ .babybear\:my-2 {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ }
+
+ .babybear\:mx-0 {
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .babybear\:mx-mobile-container-padding {
+ margin-left: 16px;
+ margin-right: 16px;
+ }
+
+ .babybear\:ml-0 {
+ margin-left: 0px;
+ }
+
+ .babybear\:mb-1 {
+ margin-bottom: 8px;
+ }
+
+ .babybear\:mt-\[6px\] {
+ margin-top: 6px;
+ }
+
+ .babybear\:mr-0 {
+ margin-right: 0px;
+ }
+
+ .babybear\:ml-\[-9999px\] {
+ margin-left: -9999px;
+ }
+
+ .babybear\:mb-1\.5 {
+ margin-bottom: 12px;
+ }
+
+ .babybear\:ml-1 {
+ margin-left: 8px;
+ }
+
+ .babybear\:flex {
+ display: flex;
+ }
+
+ .babybear\:hidden {
+ display: none;
+ }
+
+ .babybear\:h-\[360px\] {
+ height: 360px;
+ }
+
+ .babybear\:h-\[72px\] {
+ height: 72px;
+ }
+
+ .babybear\:h-4 {
+ height: 32px;
+ }
+
+ .babybear\:h-\[27px\] {
+ height: 27px;
+ }
+
+ .babybear\:h-\[1px\] {
+ height: 1px;
+ }
+
+ .babybear\:h-\[48px\] {
+ height: 48px;
+ }
+
+ .babybear\:h-auto {
+ height: auto;
+ }
+
+ .babybear\:h-\[180px\] {
+ height: 180px;
+ }
+
+ .babybear\:max-h-\[225px\] {
+ max-height: 225px;
+ }
+
+ .babybear\:max-h-\[400px\] {
+ max-height: 400px;
+ }
+
+ .babybear\:max-h-4 {
+ max-height: 32px;
+ }
+
+ .babybear\:max-h-\[250px\] {
+ max-height: 250px;
+ }
+
+ .babybear\:min-h-\[134px\] {
+ min-height: 134px;
+ }
+
+ .babybear\:w-\[360px\] {
+ width: 360px;
+ }
+
+ .babybear\:w-full {
+ width: 100%;
+ }
+
+ .babybear\:w-6 {
+ width: 48px;
+ }
+
+ .babybear\:w-\[27px\] {
+ width: 27px;
+ }
+
+ .babybear\:w-\[1px\] {
+ width: 1px;
+ }
+
+ .babybear\:w-\[100vw\] {
+ width: 100vw;
+ }
+
+ .babybear\:w-\[calc\(100\%-68px\)\] {
+ width: calc(100% - 68px);
+ }
+
+ .babybear\:min-w-full {
+ min-width: 100%;
+ }
+
+ .babybear\:max-w-\[790px\] {
+ max-width: 790px;
+ }
+
+ .babybear\:max-w-\[32px\] {
+ max-width: 32px;
+ }
+
+ .babybear\:flex-none {
+ flex: none;
+ }
+
+ .babybear\:flex-auto {
+ flex: 1 1 auto;
+ }
+
+ .babybear\:flex-1 {
+ flex: 1 1 0%;
+ }
+
+ .babybear\:basis-1\/2 {
+ flex-basis: 50%;
+ }
+
+ .babybear\:container-lined {
+ border-radius: 8px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-surface-border);
+ background-color: var(--color-surface);
+ }
+
+ .babybear\:flex-row {
+ flex-direction: row;
+ }
+
+ .babybear\:flex-col {
+ flex-direction: column;
+ }
+
+ .babybear\:flex-wrap {
+ flex-wrap: wrap;
+ }
+
+ .babybear\:items-start {
+ align-items: flex-start;
+ }
+
+ .babybear\:items-center {
+ align-items: center;
+ }
+
+ .babybear\:justify-around {
+ justify-content: space-around;
+ }
+
+ .babybear\:self-start {
+ align-self: flex-start;
+ }
+
+ .babybear\:self-center {
+ align-self: center;
+ }
+
+ .babybear\:overflow-y-auto {
+ overflow-y: auto;
+ }
+
+ .babybear\:rounded-\[0px\] {
+ border-radius: 0px;
+ }
+
+ .babybear\:border-b-1 {
+ border-bottom-width: 1px;
+ }
+
+ .babybear\:border-solid {
+ border-style: solid;
+ }
+
+ .babybear\:border-color-border-low-emphasis {
+ border-color: var(--color-border-low-emphasis);
+ }
+
+ .babybear\:bg-color-transparent {
+ background-color: rgba(0, 0, 0, 0);
+ }
+
+ .babybear\:bg-color-brand {
+ background-color: var(--color-brand);
+ }
+
+ .babybear\:p-2 {
+ padding: 16px;
+ }
+
+ .babybear\:p-0 {
+ padding: 0px;
+ }
+
+ .babybear\:px-2 {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .babybear\:px-mobile-container-padding {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .babybear\:px-\[4px\] {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+
+ .babybear\:py-3 {
+ padding-top: 24px;
+ padding-bottom: 24px;
+ }
+
+ .babybear\:py-1\.5 {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+
+ .babybear\:py-1 {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ }
+
+ .babybear\:pb-2 {
+ padding-bottom: 16px;
+ }
+
+ .babybear\:pr-0 {
+ padding-right: 0px;
+ }
+
+ .babybear\:text-sm {
+ font-size: 14px;
+ }
+
+ .babybear\:leading-\[150px\] {
+ line-height: 150px;
+ }
+
+ .babybear\:last\:border-b-0:last-child {
+ border-bottom-width: 0;
+ }
+ }
+
+ @media (max-width: 991px) {
+ .babymamabear\:px-mobile-container-padding {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ }
+
+ @media (min-width: 768px) and (max-width: 991px) {
+ .mamabear\:absolute {
+ position: absolute;
+ }
+
+ .mamabear\:right-4 {
+ right: 32px;
+ }
+
+ .mamabear\:top-\[58px\] {
+ top: 58px;
+ }
+
+ .mamabear\:-top-1 {
+ top: -8px;
+ }
+
+ .mamabear\:flex {
+ display: flex;
+ }
+
+ .mamabear\:hidden {
+ display: none;
+ }
+
+ .mamabear\:h-\[100\%\] {
+ height: 100%;
+ }
+
+ .mamabear\:w-\[744px\] {
+ width: 744px;
+ }
+
+ .mamabear\:w-full {
+ width: 100%;
+ }
+
+ .mamabear\:w-\[calc\(100\%-97px\)\] {
+ width: calc(100% - 97px);
+ }
+
+ .mamabear\:min-w-0 {
+ min-width: 0px;
+ }
+
+ .mamabear\:max-w-\[790px\] {
+ max-width: 790px;
+ }
+
+ .mamabear\:container-lined {
+ border-radius: 8px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-surface-border);
+ background-color: var(--color-surface);
+ }
+
+ .mamabear\:container-raised {
+ border-radius: 8px;
+ background-color: var(--color-surface);
+ box-shadow: 0px 4px 12px var(--color-shadow);
+ }
+
+ .mamabear\:flex-row {
+ flex-direction: row;
+ }
+
+ .mamabear\:flex-col {
+ flex-direction: column;
+ }
+
+ .mamabear\:flex-wrap {
+ flex-wrap: wrap;
+ }
+
+ .mamabear\:items-start {
+ align-items: flex-start;
+ }
+
+ .mamabear\:items-center {
+ align-items: center;
+ }
+
+ .mamabear\:justify-start {
+ justify-content: flex-start;
+ }
+
+ .mamabear\:gap-y-1 {
+ row-gap: 8px;
+ }
+
+ .mamabear\:self-center {
+ align-self: center;
+ }
+
+ .mamabear\:rounded-tr-none {
+ border-top-right-radius: 0px;
+ }
+
+ .mamabear\:px-3 {
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+
+ .mamabear\:px-mobile-container-padding {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .mamabear\:py-3 {
+ padding-top: 24px;
+ padding-bottom: 24px;
+ }
+
+ .mamabear\:px-2 {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .mamabear\:tab-vertical.tab-sm,
+ .mamabear\:tab-vertical .tab-md,
+ .mamabear\:tab-vertical .tab-lg {
+ justify-content: flex-start;
+ }
+
+ .mamabear\:pt-desktop-content-top-margin {
+ padding-top: 16px;
+ }
+
+ .mamabear\:tab-vertical.tab-sm,
+ .mamabear\:tab-vertical .tab-md,
+ .mamabear\:tab-vertical .tab-lg {
+ justify-content: flex-start;
+ }
+
+ .mamabear\:tab-vertical.tab-selected:after {
+ position: absolute;
+ left: 0px;
+ height: 100%;
+ --tw-content: "";
+ content: var(--tw-content);
+ border-left: 4px solid var(--color-indicator-current);
+ }
+ }
+
+ @media (min-width: 768px) {
+ .papamamabear\:pt-desktop-content-top-margin {
+ padding-top: 16px;
+ }
+ }
+
+ @media (min-width: 992px) {
+ .papabear\:absolute {
+ position: absolute;
+ }
+
+ .papabear\:top-\[58px\] {
+ top: 58px;
+ }
+
+ .papabear\:-top-1 {
+ top: -8px;
+ }
+
+ .papabear\:mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .papabear\:\!mx-2 {
+ margin-left: 16px !important;
+ margin-right: 16px !important;
+ }
+
+ .papabear\:mt-\[-100px\] {
+ margin-top: -100px;
+ }
+
+ .papabear\:mb-\[18px\] {
+ margin-bottom: 18px;
+ }
+
+ .papabear\:mt-0 {
+ margin-top: 0px;
+ }
+
+ .papabear\:mt-0\.5 {
+ margin-top: 4px;
+ }
+
+ .papabear\:mr-2 {
+ margin-right: 16px;
+ }
+
+ .papabear\:ml-column-gutter {
+ margin-left: 24px;
+ }
+
+ .papabear\:flex {
+ display: flex;
+ }
+
+ .papabear\:hidden {
+ display: none;
+ }
+
+ .papabear\:h-\[34px\] {
+ height: 34px;
+ }
+
+ .papabear\:h-\[100\%\] {
+ height: 100%;
+ }
+
+ .papabear\:min-h-\[96px\] {
+ min-height: 96px;
+ }
+
+ .papabear\:w-\[400px\] {
+ width: 400px;
+ }
+
+ .papabear\:w-content-max-w {
+ width: 1128px;
+ }
+
+ .papabear\:w-core-rail-width {
+ width: 790px;
+ }
+
+ .papabear\:w-right-rail-width {
+ width: calc(1128px - 24px - 790px);
+ }
+
+ .papabear\:w-auto {
+ width: auto;
+ }
+
+ .papabear\:w-\[1128px\] {
+ width: 1128px;
+ }
+
+ .papabear\:w-\[135px\] {
+ width: 135px;
+ }
+
+ .papabear\:w-\[calc\(100\%-97px\)\] {
+ width: calc(100% - 97px);
+ }
+
+ .papabear\:min-w-0 {
+ min-width: 0px;
+ }
+
+ .papabear\:max-w-\[550px\] {
+ max-width: 550px;
+ }
+
+ .papabear\:container-lined {
+ border-radius: 8px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--color-surface-border);
+ background-color: var(--color-surface);
+ }
+
+ .papabear\:container-raised {
+ border-radius: 8px;
+ background-color: var(--color-surface);
+ box-shadow: 0px 4px 12px var(--color-shadow);
+ }
+
+ .papabear\:flex-col {
+ flex-direction: column;
+ }
+
+ .papabear\:flex-nowrap {
+ flex-wrap: nowrap;
+ }
+
+ .papabear\:items-start {
+ align-items: flex-start;
+ }
+
+ .papabear\:justify-start {
+ justify-content: flex-start;
+ }
+
+ .papabear\:justify-center {
+ justify-content: center;
+ }
+
+ .papabear\:self-start {
+ align-self: flex-start;
+ }
+
+ .papabear\:rounded-tr-none {
+ border-top-right-radius: 0px;
+ }
+
+ .papabear\:border-4 {
+ border-width: 4px;
+ }
+
+ .papabear\:p-details-container-padding {
+ padding: 24px;
+ }
+
+ .papabear\:p-0 {
+ padding: 0px;
+ }
+
+ .papabear\:py-2 {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ }
+
+ .papabear\:tab-vertical.tab-sm,
+ .papabear\:tab-vertical .tab-md,
+ .papabear\:tab-vertical .tab-lg {
+ justify-content: flex-start;
+ }
+
+ .papabear\:pt-desktop-content-top-margin {
+ padding-top: 16px;
+ }
+
+ .papabear\:tab-vertical.tab-sm,
+ .papabear\:tab-vertical .tab-md,
+ .papabear\:tab-vertical .tab-lg {
+ justify-content: flex-start;
+ }
+
+ .papabear\:text-xl {
+ font-size: 24px;
+ }
+
+ .papabear\:tab-vertical.tab-selected:after {
+ position: absolute;
+ left: 0px;
+ height: 100%;
+ --tw-content: "";
+ content: var(--tw-content);
+ border-left: 4px solid var(--color-indicator-current);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index ae0e3ba..5353ec0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import LIRenderAll from './LIRenderAll'
-
+import LIRenderAll from "./LIRenderAll";
+import "./LinkedInBadge.css";
/**
* LinkedInBadge component props used by LinkedInBadge component to render the LinkedIn badge
* @param locale: string - The locale of the badge
@@ -17,6 +17,7 @@ export type LinkedInBadgeProps = {
size: "medium" | "large";
theme: "light" | "dark";
type: "VERTICAL" | "HORIZONTAL";
+ entity: "PROFILE" | "COMPANY" | "GROUP";
vanity: string;
version: "v1" | "v2";
className: string;
@@ -43,6 +44,7 @@ export type LinkedInBadgeProps = {
* @param {string} [props.id] - The ID to assign to the badge container.
* @param {string} [props.script_src] - The URL of an external script to include for the badge.
* @param {string} [props.name] - The name to display on the badge.
+ * @param {string} {props.entity} - The entity to display on the badge.
* @param {useLinkedInApiUrlPure} [props.useLinkedInApiUrlPure] - Defaults as false, if set true, when call LinkedIn's badge API, the API request won't be proxied through Ziping Liu's server. The proxied request is used to remove security issues that some browsers may have due to the returned content of LinkedIn's API having certain headers that the browser regards as possibly harmful (although in this case its a red herring given badge content from LinkedIn does not contain malicious content or content that may be inappropriately used to harm the user's computer).
* @returns {React.ReactElement} The rendered LinkedIn badge component.
* @description This implementation uses two React components - LinkedInBadge and LIRenderAll.
@@ -53,13 +55,12 @@ export type LinkedInBadgeProps = {
* @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
*/
-
-
export default function LinkedInBadge(props: Partial
+ )}
+
+ {profileData?.profileName && (
+
+ {profileData?.profileName && <>{profileData?.profileName}}
+
+ )}
+
+
+ {profileData?.profileHeadline && (
+ <>{profileData?.profileHeadline}
+ )}
+
+
+ {profileData?.profileCompanyOrSchool &&
+ Array.isArray(profileData?.profileCompanyOrSchool) &&
+ profileData?.profileCompanyOrSchool.map(
+ (companyOrSchool, index) => {
+ return (
+ <>
+
+ {companyOrSchool.text}
+ {" "}
+ {index !== profileData?.profileCompanyOrSchool.length - 1
+ ? " | "
+ : ""}{" "}
+
+ );
+ },
+ )}
+
+