@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
1 lines • 70.4 kB
Source Map (JSON)
{"version":3,"sources":["../src/style.scss","../src/style.scss","../variables.scss","../src/shared/style.scss","../src/style.scss","../src/variables.scss","../src/tumblr-preview/post/styles.scss","../src/variables.scss","../src/tumblr-preview/post/styles.scss","../src/variables.scss","../src/tumblr-preview/post/styles.scss","../src/variables.scss","../src/styles.scss","../src/facebook-preview/post/styles.scss","../src/facebook-preview/post/styles.scss","../src/variables.scss","../src/facebook-preview/post/styles.scss","../src/variables.scss","../src/style.scss","../src/variables.scss","../src/mastodon-preview/post/styles.scss","../src/variables.scss","../src/mastodon-preview/post/styles.scss","../src/variables.scss","../src/mastodon-preview/post/styles.scss","../src/styles.scss","../src/variables.scss","../src/mastodon-preview/post/styles.scss","../src/variables.scss","../src/style.scss","../src/bluesky-preview/post/styles.scss","../src/bluesky-preview/post/styles.scss","../src/variables.scss","../src/bluesky-preview/post/styles.scss","../src/variables.scss","../src/bluesky-preview/post/styles.scss","../src/bluesky-preview/post/styles.scss","../src/styles.scss","../src/variables.scss","../src/style.scss","../src/variables.scss","../src/style.scss"],"sourcesContent":["/*\n * CSS values in this file are specific and\n * designed to match the CSS on external sites,\n * such as Google and Facebook. Therefore there\n * will be exceptions to our CSS guidelines here\n * but please do not \"update\" this file to\n * conform.\n *\n * @blame: dmsnell\n*/\n\n.search-preview__display {\n\tborder: 1px solid var(--color-neutral-0);\n\tfont-family: arial, sans-serif;\n\tpadding: 10px 20px;\n\toverflow-wrap: break-word;\n}\n\n.search-preview__header {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: 0.5rem;\n}\n\n.search-preview__menu {\n\theight: 18px;\n\twidth: 18px;\n\tcolor: #4d5156;\n\tposition: relative;\n}\n\n.search-preview__branding {\n\tdisplay: flex;\n\tgap: 0.75rem;\n\talign-items: center;\n}\n\n.search-preview__site--title {\n\tcolor: #202124; // matching Google results\n\tfont-size: 14px;\n\tline-height: 20px;\n}\n\n.search-preview__icon {\n\twidth: 1.75rem;\n\theight: 1.75rem;\n}\n\n.search-preview__title {\n\tcolor: #1a0dab; // matching Google results\n\tfont-size: 20px;\n\tline-height: 1.3;\n\tmax-width: 616px;\n\tmargin-top: 8px;\n\tmargin-bottom: 7px;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t\ttext-decoration: underline;\n\t}\n}\n\n.search-preview__url {\n\tcolor: #4d5156; // matching Google results\n\tfont-size: 12px;\n\tline-height: 1.3;\n\tmax-width: 616px;\n}\n\n.search-preview__description {\n\tcolor: #4d5156; // matching Google results\n\tfont-size: 14px;\n\tfont-weight: 400;\n\tline-height: 1.5;// matching Google results\n\tmax-width: 616px;\n}\n","/*\n * CSS values in this file are specific and\n * designed to match the CSS on Twitter. Therefore there\n * will be exceptions to our CSS guidelines here\n * but please do not \"update\" this file to conform.\n *\n * @blame: pento\n */\n\n@use \"../variables\" as vars;\n\n.twitter-preview {\n\tpadding: 20px;\n}\n\n.twitter-preview__wrapper {\n\tbackground-color: #fff;\n\tmax-width: clamp(200px, 100%, 635px);\n\tmargin-inline: auto;\n\tpadding-top: 1rem;\n\tborder-radius: 4px;\n\tpadding-inline-end: 1rem;\n}\n\n.twitter-preview__section.social-preview__section {\n\twidth: clamp(200px, 100%, 635px);\n\n\t// To compensate for the padding for profile picture in twitter threads\n\t.social-preview__section-heading,\n\t.social-preview__section-desc {\n\t\tpadding-inline-start: 17px;\n\t}\n}\n\n.twitter-preview__container {\n\tdisplay: grid;\n\tgrid-template-columns: 65px auto;\n\tmargin-bottom: 5px;\n\tfont-size: vars.$tweet-font-size;\n\tline-height: 20px;\n\n\t.twitter-preview__sidebar {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 35px auto;\n\t\tjustify-items: center;\n\n\t\t.twitter-preview__profile-image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmax-width: 30px;\n\t\t\tmax-height: 30px;\n\t\t\tborder-radius: 50%;\n\t\t\toverflow: hidden;\n\n\t\t\timg {\n\t\t\t\tobject-fit: cover;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t.twitter-preview__connector {\n\t\t\twidth: 2px;\n\t\t\tbackground-color: #8c8f94;\n\t\t}\n\t}\n\n\t.twitter-preview__main {\n\t\tpadding-bottom: 1rem;\n\t\toverflow: hidden;\n\t}\n\n\t.twitter-preview__header {\n\t\tdisplay: flex;\n\t\tgap: 0.25rem;\n\t\tfont-size: 16px;\n\t\tline-height: 18px;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.twitter-preview__name {\n\t\tfont-weight: 700;\n\t}\n\n\t.twitter-preview__screen-name,\n\t.twitter-preview__date {\n\t\tcolor: #667886;\n\t\tletter-spacing: -0.3px;\n\t}\n\n\t.twitter-preview__content {\n\n\t\t.twitter-preview__text {\n\t\t\tcolor: rgb(15, 20, 25);\n\t\t\twhite-space: pre-wrap;\n\t\t\toverflow-wrap: break-word;\n\t\t}\n\n\t\t.twitter-preview__media {\n\t\t\tborder-radius: 15px; /* stylelint-disable-line scales/radii */\n\t\t\toverflow: hidden;\n\t\t\tdisplay: grid;\n\t\t\tgap: 2px;\n\t\t\tgrid-template-areas: \"a\";\n\t\t\theight: 300px;\n\t\t\tmargin-top: 12px;\n\n\t\t\timg,\n\t\t\tvideo {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\n\t\t\t\t&:nth-child(1) {\n\t\t\t\t\tgrid-area: a;\n\t\t\t\t}\n\n\t\t\t\t&:nth-child(2) {\n\t\t\t\t\tgrid-area: b;\n\t\t\t\t}\n\n\t\t\t\t&:nth-child(3) {\n\t\t\t\t\tgrid-area: c;\n\t\t\t\t}\n\n\t\t\t\t&:nth-child(4) {\n\t\t\t\t\tgrid-area: d;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.twitter-preview__media-children-2 {\n\t\t\t\tgrid-template-areas: \"a b\";\n\t\t\t}\n\n\t\t\t&.twitter-preview__media-children-3 {\n\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\"a b\"\n\t\t\t\t\t\"a c\";\n\t\t\t}\n\n\t\t\t&.twitter-preview__media-children-4 {\n\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\"a b\"\n\t\t\t\t\t\"c d\";\n\t\t\t}\n\t\t}\n\n\t\t.twitter-preview__quote-tweet {\n\t\t\tmargin-top: 10px;\n\t\t\tmin-height: 200px;\n\n\t\t\t.twitter-preview__quote-tweet-overlay {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tright: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t}\n\n\t\t.twitter-preview__card {\n\t\t\tmargin-top: 12px;\n\t\t\tmargin-bottom: 12px;\n\t\t\toverflow: hidden;\n\t\t\tborder: 1px solid #e1e8ed;\n\t\t\tborder-radius: 12px; /* stylelint-disable-line scales/radii */\n\n\t\t\t.twitter-preview__card-summary {\n\t\t\t\tdisplay: grid;\n\n\t\t\t\t&.twitter-preview__card-has-image {\n\t\t\t\t\theight: 125px;\n\t\t\t\t\tdisplay: grid;\n\t\t\t\t\tgrid-template-columns: 125px auto;\n\n\t\t\t\t\t.twitter-preview__card-body {\n\t\t\t\t\t\tborder-left: 1px solid #e1e8ed;\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t}\n\n\t\t\t\t\t.twitter-preview__card-description {\n\t\t\t\t\t\t-webkit-line-clamp: 3;\n\t\t\t\t\t\tline-clamp: 3;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.twitter-preview__card-summary_large_image {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-rows: 254px auto;\n\t\t\t}\n\n\t\t\t.twitter-preview__card-image {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\taspect-ratio: 16/9;\n\t\t\t}\n\n\t\t\t.twitter-preview__card-body {\n\t\t\t\tpadding: 0.75em;\n\t\t\t\ttext-decoration: none;\n\t\t\t\tfont-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n\t\t\t\tcolor: var(--studio-black);\n\t\t\t\ttext-align: left;\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 2px;\n\t\t\t}\n\n\t\t\t.twitter-preview__card-title {\n\t\t\t\tmax-height: 1.3em;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\n\t\t\t.twitter-preview__card-description {\n\t\t\t\tmax-height: 3.9em;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\tcolor: rgb(83, 100, 113);\n\t\t\t\t//clamp after three lines\n\t\t\t\tdisplay: -webkit-box;\n\t\t\t\t-webkit-line-clamp: 3;\n\t\t\t\t-webkit-box-orient: vertical;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n\t\t\t.twitter-preview__card-url {\n\t\t\t\ttext-transform: lowercase;\n\t\t\t\tcolor: #8899a6;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow-inline: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\t\t}\n\t}\n\n\t.twitter-preview__footer {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tmax-width: 425px;\n\t\tmargin-top: 12px;\n\n\t\tsvg {\n\t\t\tfill: #787c82;\n\t\t\theight: 16px;\n\t\t\twidth: 16px;\n\t\t}\n\t}\n}\n","// Define variables, but only if they already don't exist.\n// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n// This is for any outside consumers of the package that\n// don't have the entire calypso environment, which provides\n// these variables from a private package.\n// (See: https://sass-lang.com/documentation/variables#default-values )\n\n// In a regular calypso environment with @automattic/typography pulled in,\n// these won't have any effect.\n\n$font-body-extra-small: 12px !default;\n$font-body-small: 14px !default;\n$tweet-font-size: 15px !default;\n$tweet-line-height: 20px !default;\n",".social-previews__expand-toggle.components-button.is-link {\n\theight: auto;\n\tpadding: 0;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n",".linkedin-preview {\n\n\t&__wrapper {\n\t\tmargin-inline: auto;\n\t\tmax-width: clamp(200px, 100%, 555px);\n\t}\n\n\t// When the preview is in a section of all previews\n\t&__section &__wrapper {\n\t\tpadding: 0;\n\t}\n\n\t&__section.social-preview__section {\n\t\twidth: clamp(200px, 100%, 555px);\n\t}\n\n\t&__container {\n\t\tbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.05);\n\t\tbackground-color: #fff;\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\n\t\t&.has-media {\n\t\t\t// When the preview has media,\n\t\t\t// we want to hide the border radius on the bottom\n\t\t\tborder-end-end-radius: 0;\n\t\t\tborder-end-start-radius: 0;\n\t\t}\n\t}\n\n\t&__header {\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t\tpadding: 0.8rem 1rem 0;\n\t\tmargin-bottom: 0.8rem;\n\n\t\t&--avatar {\n\t\t\twidth: 48px;\n\t\t\theight: 48px;\n\t\t\tborder-radius: 50%;\n\t\t\toverflow: hidden;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t&--avatar img {\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\n\t\t&--profile {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&--profile-title {\n\t\t\tfont-size: 0.75rem;\n\t\t}\n\n\t\t&--profile-info {\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.25rem;\n\t\t}\n\n\t\t&--profile-name {\n\t\t\tfont-weight: 600;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t&--profile-meta {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0.25rem;\n\t\t}\n\t}\n\n\t&__caption {\n\t\tmargin: 0 1rem;\n\t\tfont-size: 0.875rem;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t}\n\n\t&__content article,\n\t&__media {\n\t\tmargin-top: 0.5rem;\n\t\tbackground-color: #eef3f8;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t&__media-item {\n\t\tdisplay: flex;\n\n\t\timg,\n\t\tvideo {\n\t\t\twidth: 100%;\n\t\t\tobject-fit: cover;\n\t\t}\n\t}\n\n\t&__description {\n\t\tpadding: 0.5rem 0.75rem;\n\n\t\t&--title {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 0.875rem;\n\t\t\tfont-weight: 600;\n\t\t}\n\n\t\t&--meta {\n\t\t\tmargin-top: 0.5rem;\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.25rem;\n\t\t\tfont-size: 0.875rem;\n\t\t\tfont-weight: 400;\n\t\t\tcolor: rgba(0, 0, 0, 0.6);\n\t\t}\n\t}\n\n\t&__image {\n\t\tobject-fit: cover;\n\t\twidth: 100%;\n\t}\n}\n","$tumblr-preview-width: 540px;\n$tumblr-preview-avatar-size: 64px;\n$tumblr-preview-text-color: #000;\n$tumblr-preview-background-color: #fff;\n$tumblr-preview-action-text-color: rgba(0, 0, 0, 0.65);\n$tumblr-preview-font-family: \"Favorit\", \"Helvetica Neue\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;\n$tumblr-preview-border-radius: 8px;\n/* stylelint-disable-next-line scales/radii */\n$tumblr-preview-window-border-radius: 6px;\n$tumblr-preview-border: solid 1px rgba(194, 123, 123, 0.15);\n$tumblr-preview-card-inline-padding: 1.25rem;\n$tumblr-preview-accent-color: #00b8ff;\n$tumblr-preview-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.05);\n","@use \"../../variables\" as vars;\n\n.tumblr-preview__post-icon {\n\tdisplay: flex;\n\talign-items: center;\n\n\tsvg {\n\t\tfill: vars.$tumblr-preview-action-text-color;\n\t}\n}\n\n.tumblr-preview__post-icon-blaze {\n\twidth: 23px;\n\theight: 20px;\n}\n\n.tumblr-preview__post-icon-delete {\n\twidth: 17px;\n\theight: 21px;\n}\n\n\n.tumblr-preview__post-icon-edit {\n\twidth: 21px;\n\theight: 21px;\n}\n\n\n.tumblr-preview__post-icon-share {\n\twidth: 24px;\n\theight: 24px;\n}\n\n\n.tumblr-preview__post-icon-reply {\n\twidth: 21px;\n\theight: 21px;\n}\n\n\n.tumblr-preview__post-icon-reblog {\n\twidth: 21px;\n\theight: 21px;\n}\n\n\n.tumblr-preview__post-icon-like {\n\twidth: 23px;\n\theight: 21px;\n}\n\n\n.tumblr-preview__post-icon-ellipsis {\n\twidth: 18px;\n\theight: 4px;\n}\n","$tumblr-preview-width: 540px;\n$tumblr-preview-avatar-size: 64px;\n$tumblr-preview-text-color: #000;\n$tumblr-preview-background-color: #fff;\n$tumblr-preview-action-text-color: rgba(0, 0, 0, 0.65);\n$tumblr-preview-font-family: \"Favorit\", \"Helvetica Neue\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;\n$tumblr-preview-border-radius: 8px;\n/* stylelint-disable-next-line scales/radii */\n$tumblr-preview-window-border-radius: 6px;\n$tumblr-preview-border: solid 1px rgba(194, 123, 123, 0.15);\n$tumblr-preview-card-inline-padding: 1.25rem;\n$tumblr-preview-accent-color: #00b8ff;\n$tumblr-preview-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.05);\n","@use \"../../variables\" as vars;\n\n.tumblr-preview__post-actions {\n\tmargin-top: 0.25rem;\n\tpadding: 0 vars.$tumblr-preview-card-inline-padding;\n\tcolor: vars.$tumblr-preview-action-text-color;\n\n\tfont-size: 1rem; // 16px\n\tfont-weight: 700;\n\tline-height: 1.5;\n}\n\n.tumblr-preview__post-manage-actions,\n.tumblr-preview__post-social-actions {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\n\tmin-height: 3.5rem;\n\n\tul {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 1.25rem;\n\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\tlist-style-type: none;\n\n\t\t> li {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n}\n\n.tumblr-preview__post-social-actions {\n\tborder-top: vars.$tumblr-preview-border;\n}\n\n.tumblr-preview__post-actions-blaze {\n\tdisplay: flex;\n\talign-items: center;\n}\n","$tumblr-preview-width: 540px;\n$tumblr-preview-avatar-size: 64px;\n$tumblr-preview-text-color: #000;\n$tumblr-preview-background-color: #fff;\n$tumblr-preview-action-text-color: rgba(0, 0, 0, 0.65);\n$tumblr-preview-font-family: \"Favorit\", \"Helvetica Neue\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;\n$tumblr-preview-border-radius: 8px;\n/* stylelint-disable-next-line scales/radii */\n$tumblr-preview-window-border-radius: 6px;\n$tumblr-preview-border: solid 1px rgba(194, 123, 123, 0.15);\n$tumblr-preview-card-inline-padding: 1.25rem;\n$tumblr-preview-accent-color: #00b8ff;\n$tumblr-preview-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.05);\n","@use \"../../variables\" as vars;\n\n.tumblr-preview__post-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\n\tmargin: 1rem 0;\n\tpadding: 0 vars.$tumblr-preview-card-inline-padding;\n}\n\n.tumblr-preview__post-header-username {\n\tfont-size: 0.875rem; // 14px\n\tfont-weight: 700;\n\tline-height: 1.5;\n}\n","$tumblr-preview-width: 540px;\n$tumblr-preview-avatar-size: 64px;\n$tumblr-preview-text-color: #000;\n$tumblr-preview-background-color: #fff;\n$tumblr-preview-action-text-color: rgba(0, 0, 0, 0.65);\n$tumblr-preview-font-family: \"Favorit\", \"Helvetica Neue\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;\n$tumblr-preview-border-radius: 8px;\n/* stylelint-disable-next-line scales/radii */\n$tumblr-preview-window-border-radius: 6px;\n$tumblr-preview-border: solid 1px rgba(194, 123, 123, 0.15);\n$tumblr-preview-card-inline-padding: 1.25rem;\n$tumblr-preview-accent-color: #00b8ff;\n$tumblr-preview-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.05);\n","@use \"./variables\" as vars;\n\n\n.tumblr-preview__section.social-preview__section {\n\twidth: clamp(200px, 100%, calc(#{vars.$tumblr-preview-width + vars.$tumblr-preview-avatar-size} + #{vars.$tumblr-preview-card-inline-padding}));\n}\n\n.tumblr-preview__post {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 1.25rem;\n}\n\n.tumblr-preview__avatar {\n\twidth: vars.$tumblr-preview-avatar-size;\n\theight: vars.$tumblr-preview-avatar-size;\n\n\tborder-radius: vars.$tumblr-preview-border-radius;\n\n\t@media (max-width: 660px) {\n\t\tdisplay: none;\n\t}\n}\n\n.tumblr-preview__card {\n\toverflow-y: hidden;\n\n\tbackground-color: vars.$tumblr-preview-background-color;\n\tborder-radius: vars.$tumblr-preview-border-radius;\n\tbox-shadow: vars.$tumblr-preview-box-shadow;\n\n\tcolor: vars.$tumblr-preview-text-color;\n\tfont-family: vars.$tumblr-preview-font-family;\n\tfont-size: 1rem;\n\n\t:any-link {\n\t\tcolor: inherit;\n\t\ttext-decoration: underline;\n\t}\n}\n\n.tumblr-preview__custom-text {\n\tmargin: 0 0 1rem 0;\n\tpadding: 0 vars.$tumblr-preview-card-inline-padding;\n}\n\n.tumblr-preview__title {\n\tmargin: 0 0 1rem 0;\n\tpadding: 0 vars.$tumblr-preview-card-inline-padding;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 1.625rem; // 26px\n\tfont-weight: 400;\n\tline-height: 1.3;\n}\n\n.tumblr-preview__description {\n\tmargin: 0 0 1rem 0;\n\tpadding: 0 vars.$tumblr-preview-card-inline-padding;\n\n\tfont-size: 1rem; // 16px\n\tline-height: 1.5;\n}\n\n.tumblr-preview__image {\n\tdisplay: block;\n\tmargin: 0 0 1rem;\n\twidth: 100%;\n}\n\n.tumblr-preview__url {\n\tdisplay: inline-block;\n\n\tmargin: 0 0 1rem 0;\n\tpadding: 0 vars.$tumblr-preview-card-inline-padding;\n}\n\n.tumblr-preview__site-name {\n\tcolor: vars.$tumblr-preview-action-text-color;\n\n\tfont-size: 0.75rem;\n\ttext-transform: uppercase;\n}\n\n.tumblr-preview__window {\n\tmargin: 0 vars.$tumblr-preview-card-inline-padding 1.25rem;\n}\n\n.tumblr-preview__window-top {\n\tposition: relative;\n\n\tborder-top-left-radius: vars.$tumblr-preview-window-border-radius;\n\tborder-top-right-radius: vars.$tumblr-preview-window-border-radius;\n\n\t.tumblr-preview__image {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\taspect-ratio: 16/9;\n\t\tborder-top-left-radius: inherit;\n\t\tborder-top-right-radius: inherit;\n\t\tobject-fit: cover;\n\t}\n}\n\n.tumblr-preview__window-bottom {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5rem;\n\n\tpadding: 1rem 0.75rem;\n\n\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\tborder-bottom-left-radius: vars.$tumblr-preview-window-border-radius;\n\tborder-bottom-right-radius: vars.$tumblr-preview-window-border-radius;\n\n\t&.is-full {\n\t\tborder-top-left-radius: vars.$tumblr-preview-window-border-radius;\n\t\tborder-top-right-radius: vars.$tumblr-preview-window-border-radius;\n\t}\n\n\t> * {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}\n\n.tumblr-preview__overlay {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding: 1rem 0.75rem;\n\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tborder-top-left-radius: inherit;\n\tborder-top-right-radius: inherit;\n\tcolor: #fff;\n\n\t> * {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}\n",".facebook-preview__post-icon {\n\tdisplay: inline-block;\n\n\t/* stylelint-disable-next-line function-url-quotes */\n\tbackground-image: url(\"data:image/png;base64,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\");\n\tbackground-repeat: no-repeat;\n\tbackground-size: 73px 18px;\n\n\tfilter: invert(40%);\n}\n\n.facebook-preview__post-icon-like {\n\twidth: 18px;\n\theight: 18px;\n\n\tbackground-position: 0 0;\n}\n\n.facebook-preview__post-icon-comment {\n\twidth: 18px;\n\theight: 18px;\n\n\tbackground-position: -18px 0;\n}\n\n.facebook-preview__post-icon-share {\n\twidth: 18px;\n\theight: 18px;\n\n\tbackground-position: -36px 0;\n}\n\n.facebook-preview__post-icon-info {\n\twidth: 7px;\n\theight: 14px;\n\n\tbackground-position: -54px 0;\n}\n\n.facebook-preview__post-icon-public {\n\twidth: 12px;\n\theight: 12px;\n\n\tbackground-position: -61px 0;\n}\n","@use \"../../variables\" as vars;\n\n.facebook-preview__post-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-around;\n\n\twidth: 100%;\n\theight: 2.625rem; // 42px\n\tmargin: 0;\n\tpadding: 0;\n\n\tcolor: vars.$facebook-preview-light-text-color;\n\tlist-style-type: none;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem; // 15px\n\tfont-weight: 600;\n\tline-height: 1.33;\n\n\t> li {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5rem;\n\n\t\tmargin: 0;\n\t}\n}\n","$facebook-preview-max-width: 680px;\n$facebook-preview-min-width: 508px;\n$facebook-preview-text-color: #050505;\n$facebook-preview-light-text-color: #65676b;\n$facebook-preview-font-family: system-ui, -apple-system, BlinkMacSystemFont, \".SFNSText-Regular\", sans-serif;\n$facebook-preview-card-background-color: #fff;\n$facebook-preview-card-border-radius: 4px;\n$facebook-preview-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgb(0 0 0 / 5%);\n$facebook-preview-text-background-color: #f0f2f5;\n$facebook-preview-body-border: 1px solid #d4d0d4;\n$facebook-preview-image-background: #121212;\n$facebook-blue: #216fdb;\n","@use \"../../variables\" as vars;\n\n.facebook-preview__post-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tpadding: 0.75rem 1rem 0.5rem;\n\tmin-height: 60px;\n}\n\n.facebook-preview__post-header-content {\n\tdisplay: flex;\n\tgap: 0.5rem;\n}\n\n.facebook-preview__post-header-avatar {\n\twidth: 40px;\n\theight: 40px;\n\n\tborder-radius: 50%;\n\tborder: solid 1px #e5e5e5;\n}\n\n.facebook-preview__post-header-name {\n\tcolor: vars.$facebook-preview-text-color;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem; // 15px\n\tfont-weight: 600;\n\tline-height: 1.33;\n}\n\n.facebook-preview__post-header-share {\n\tdisplay: flex;\n\talign-items: center;\n\n\tcolor: vars.$facebook-preview-light-text-color;\n}\n\n.facebook-preview__post-header-time {\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.8125rem; // 13px\n\tline-height: 1.23;\n}\n\n.facebook-preview__post-header-dot {\n\twidth: 0.625rem;\n\n\ttext-align: center;\n}\n\n.facebook-preview__post-header-more {\n\twidth: 1.25rem;\n\theight: 0.25rem;\n\n\tmargin: 0 0.625rem 0 0;\n\n\tbackground-image: radial-gradient(circle at 0.125rem 0.125rem, vars.$facebook-preview-light-text-color 2px, transparent 0);\n\tbackground-size: 0.5rem 0.25rem;\n}\n","$facebook-preview-max-width: 680px;\n$facebook-preview-min-width: 508px;\n$facebook-preview-text-color: #050505;\n$facebook-preview-light-text-color: #65676b;\n$facebook-preview-font-family: system-ui, -apple-system, BlinkMacSystemFont, \".SFNSText-Regular\", sans-serif;\n$facebook-preview-card-background-color: #fff;\n$facebook-preview-card-border-radius: 4px;\n$facebook-preview-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgb(0 0 0 / 5%);\n$facebook-preview-text-background-color: #f0f2f5;\n$facebook-preview-body-border: 1px solid #d4d0d4;\n$facebook-preview-image-background: #121212;\n$facebook-blue: #216fdb;\n","@use \"./variables\" as vars;\n\n.facebook-preview__post {\n\toverflow-y: hidden;\n\tmax-width: clamp(#{vars.$facebook-preview-min-width}, 100%, #{vars.$facebook-preview-max-width});\n\tmargin-inline: auto;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbackground-color: vars.$facebook-preview-card-background-color;\n\tborder-radius: vars.$facebook-preview-card-border-radius;\n\tbox-shadow: vars.$facebook-preview-card-box-shadow;\n\n\tfont-family: vars.$facebook-preview-font-family;\n\n\t:any-link {\n\t\tcolor: vars.$facebook-blue;\n\n\t\ttext-decoration: none;\n\t}\n}\n\n.facebook-preview__custom-text {\n\tmargin: 0;\n\tpadding: 0 1rem 1rem;\n\n\tcolor: vars.$facebook-preview-text-color;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem; // 15px\n\tline-height: 1.33;\n\toverflow-wrap: break-word;\n}\n\n.facebook-preview__custom-text-post-url {\n\tdisplay: block;\n\tmargin-top: 0.5rem;\n}\n\n.facebook-preview__body {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tborder-top: vars.$facebook-preview-body-border;\n\tborder-bottom: vars.$facebook-preview-body-border;\n\n\t&.is-loading {\n\t\tvisibility: hidden;\n\t}\n\n\t&.is-portrait {\n\t\tflex-direction: row;\n\t}\n}\n\n.facebook-preview__text {\n\tposition: relative;\n\n\tdisplay: flex;\n\talign-items: center;\n\tflex: 1;\n\n\tpadding: 0.5rem 1rem;\n\n\tbackground-color: vars.$facebook-preview-text-background-color;\n\tcolor: vars.$facebook-preview-text-color;\n\n\toverflow-wrap: break-word;\n}\n\n.facebook-preview__text-wrapper {\n\twidth: 100%;\n}\n\n.facebook-preview__url {\n\tmargin-bottom: 0.25rem;\n\n\tcolor: vars.$facebook-preview-light-text-color;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.8125rem; // 13px\n\tline-height: 1;\n\ttext-transform: uppercase;\n}\n\n.facebook-preview__title {\n\tmargin: 0.25rem 0 0.125rem;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9444rem; // 17px\n\tfont-weight: 600;\n\tline-height: 1.18;\n}\n\n.facebook-preview__description {\n\tcolor: vars.$facebook-preview-light-text-color;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem; // 15px\n\tline-height: 1.33;\n\n\t.facebook-preview__body.is-landscape &.is-compact {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.facebook-preview__image,\n.facebook-preview__custom-image,\n.facebook-preview__media-item {\n\n\timg,\n\tvideo {\n\t\tdisplay: block;\n\t\tobject-fit: cover;\n\t\twidth: 100%;\n\t}\n}\n\n.facebook-preview__image {\n\n\t&.is-empty {\n\t\twidth: 140px;\n\t\theight: 140px;\n\n\t\tborder-inline-end: vars.$facebook-preview-body-border;\n\t}\n\n\t&.is-portrait {\n\n\t\timg {\n\t\t\twidth: 278px;\n\t\t\theight: 430px;\n\t\t}\n\t}\n\n\t&.is-landscape {\n\n\t\timg {\n\t\t\t// At the moment of writing, the post card on Facebook.com\n\t\t\t// goes from 508 to 680px wide on desktop.\n\t\t\t// In landscape mode, the image takes the full width of the card, and\n\t\t\t// respect the 1.91 aspect ratio at any width.\n\t\t\twidth: 100%;\n\t\t\taspect-ratio: 1.91;\n\t\t}\n\t}\n}\n\n.facebook-preview__custom-image,\n.facebook-preview__media-item {\n\tdisplay: flex;\n\tjustify-content: center;\n\n\twidth: 100%;\n\n\tbackground-color: vars.$facebook-preview-image-background;\n\n\t&.is-portrait {\n\n\t\timg {\n\t\t\twidth: 500px;\n\t\t\theight: 685px;\n\t\t}\n\t}\n\n\t&.is-landscape {\n\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\taspect-ratio: 1.78;\n\t\t}\n\t}\n}\n\n.facebook-preview__info {\n\tposition: absolute;\n\tright: 15px;\n\ttop: -10px;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\twidth: 30px;\n\theight: 30px;\n\n\tbackground-color: vars.$facebook-preview-card-background-color;\n\tborder: vars.$facebook-preview-body-border;\n\tborder-radius: 50%;\n\n\ti {\n\t\tfilter: invert(8%);\n\t}\n}\n\n.facebook-preview__window {\n\tmargin: 0 0.75rem;\n\n\tborder-radius: 16px;\n\tborder: vars.$facebook-preview-body-border;\n\n\t.facebook-preview__image,\n\t.facebook-preview__custom-image {\n\t\tborder-top-right-radius: inherit;\n\t\tborder-top-left-radius: inherit;\n\n\t\timg {\n\t\t\tborder-top-right-radius: inherit;\n\t\t\tborder-top-left-radius: inherit;\n\t\t}\n\t}\n}\n","$facebook-preview-max-width: 680px;\n$facebook-preview-min-width: 508px;\n$facebook-preview-text-color: #050505;\n$facebook-preview-light-text-color: #65676b;\n$facebook-preview-font-family: system-ui, -apple-system, BlinkMacSystemFont, \".SFNSText-Regular\", sans-serif;\n$facebook-preview-card-background-color: #fff;\n$facebook-preview-card-border-radius: 4px;\n$facebook-preview-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 -1px 0 rgb(0 0 0 / 5%);\n$facebook-preview-text-background-color: #f0f2f5;\n$facebook-preview-body-border: 1px solid #d4d0d4;\n$facebook-preview-image-background: #121212;\n$facebook-blue: #216fdb;\n","@use \"../../variables\" as vars;\n\n.mastodon-preview__post-actions {\n\tmargin-top: 1rem;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\n\t> div {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: #606984;\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n}\n\n.mastodon-preview__post-icon-text {\n\tcolor: vars.$mastodon-ui-text-color;\n\n\tfont-size: 0.75rem;\n\tfont-weight: 500;\n}\n","$mastodon-preview-width: 578px;\n$mastodon-preview-text-color: #444b5d;\n$mastodon-body-text-color: #000;\n$mastodon-preview-background-color: #fff;\n$mastodon-preview-font-family: \"mastodon-font-sans-serif\",sans-serif;\n$mastodon-preview-accent-color: #3a3bff;\n$mastodon-ui-text-color: #525a71;\n","@use \"../../variables\" as vars;\n\n.mastodon-preview__card {\n\tdisplay: flex;\n\n\tmargin-top: 1rem;\n\tmargin-bottom: 1rem;\n\n\tborder: solid 1px #d9e1e8;\n\tborder-radius: 8px;\n\toverflow: hidden;\n\tcolor: vars.$mastodon-body-text-color;\n\n\t&.has-image {\n\t\tflex-direction: column;\n\t}\n\n\t&.has-image &-img {\n\t\twidth: 100%;\n\t}\n}\n\n.mastodon-preview__card-img {\n\tmin-height: 60px;\n\n\timg {\n\t\tdisplay: block;\n\n\t\twidth: 100%;\n\t\tmin-height: 100%;\n\t\tobject-fit: cover;\n\n\t\tborder-start-start-radius: inherit;\n\t\tborder-end-start-radius: inherit;\n\t}\n\n\t&--fallback {\n\t\taspect-ratio: 1;\n\t\tbackground: #c0cdd9;\n\t\tposition: relative;\n\t\twidth: 120px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n}\n\n.mastodon-preview__card-text {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5rem;\n\tpadding: 1rem;\n\toverflow: hidden;\n}\n\n.mastodon-preview__card-title {\n\tcolor: #282c37;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 1.187rem;\n\tfont-weight: 700;\n\tline-height: 1.4;\n}\n\n.mastodon-preview__card-site {\n\tfont-size: 0.875rem;\n\tdisplay: block;\n}\n\n.mastodon-preview__card-description {\n\tfont-size: 0.875rem;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\n\t-webkit-box-orient: vertical;\n\t-webkit-line-clamp: 1;\n\tdisplay: -webkit-box;\n}\n","$mastodon-preview-width: 578px;\n$mastodon-preview-text-color: #444b5d;\n$mastodon-body-text-color: #000;\n$mastodon-preview-background-color: #fff;\n$mastodon-preview-font-family: \"mastodon-font-sans-serif\",sans-serif;\n$mastodon-preview-accent-color: #3a3bff;\n$mastodon-ui-text-color: #525a71;\n",".mastodon-preview__post-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: start;\n\n\tmargin-bottom: 0.625rem;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem;\n\tline-height: 1.47;\n}\n\n.mastodon-preview__post-avatar {\n\twidth: 46px;\n\theight: 46px;\n\n\tborder-radius: 4px;\n}\n\n.mastodon-preview__post-header-user {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n}\n\n.mastodon-preview__post-header-displayname {\n\tcolor: #000;\n\tfont-weight: 700;\n}\n\n.mastodon-preview__post-header-audience {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.25rem;\n}\n","@use \"./variables\" as vars;\n\n.mastodon-preview__section {\n\tmax-width: 100%;\n\twidth: vars.$mastodon-preview-width;\n\tmargin-inline: auto;\n}\n\n.mastodon-preview__post {\n\twidth: 100%;\n\toverflow-y: hidden;\n\tbox-sizing: border-box;\n\tpadding: 1rem;\n\n\tbackground-color: vars.$mastodon-preview-background-color;\n\tborder: 1px solid #c0cdd9;\n\tcolor: vars.$mastodon-preview-text-color;\n\n\tfont-family: vars.$mastodon-preview-font-family;\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem;\n\tline-height: 1.47;\n\n\t:any-link {\n\t\tcolor: vars.$mastodon-preview-accent-color;\n\n\t\ttext-decoration: none;\n\t}\n}\n\n.mastodon-preview__img {\n\tdisplay: block;\n\n\twidth: 100%;\n\tmargin: 0.875rem auto 0;\n\n\tborder-radius: 4px;\n\n\taspect-ratio: 16 / 9;\n\tobject-fit: cover;\n}\n\n.mastodon-preview__media {\n\tmargin-top: 8px;\n\tmin-height: 64px;\n\tborder-radius: 8px;\n\n\t&.as-grid {\n\t\tdisplay: grid;\n\t\tgap: 2px;\n\t\tgrid-template-columns: 50% 50%;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t}\n\n\t&-item {\n\t\tdisplay: flex;\n\t\tborder: 0;\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\n\t\timg,\n\t\tvideo {\n\t\t\twidth: 100%;\n\t\t\tobject-fit: cover;\n\t\t}\n\t}\n}\n","$mastodon-preview-width: 578px;\n$mastodon-preview-text-color: #444b5d;\n$mastodon-body-text-color: #000;\n$mastodon-preview-background-color: #fff;\n$mastodon-preview-font-family: \"mastodon-font-sans-serif\",sans-serif;\n$mastodon-preview-accent-color: #3a3bff;\n$mastodon-ui-text-color: #525a71;\n","@use \"../../variables\" as vars;\n\n.mastodon-preview__body {\n\tmargin-bottom: 1rem;\n\n\tcolor: vars.$mastodon-body-text-color;\n\n\t> p {\n\t\tmargin-bottom: 1.25rem;\n\t}\n}\n\n","$mastodon-preview-width: 578px;\n$mastodon-preview-text-color: #444b5d;\n$mastodon-body-text-color: #000;\n$mastodon-preview-background-color: #fff;\n$mastodon-preview-font-family: \"mastodon-font-sans-serif\",sans-serif;\n$mastodon-preview-accent-color: #3a3bff;\n$mastodon-ui-text-color: #525a71;\n",".nextdoor-preview {\n\n\t&__wrapper {\n\t\tmax-width: clamp(200px, 100%, 600px);\n\t}\n\n\t// When the preview is in a section of all previews\n\t&__section &__wrapper {\n\t\tpadding: 0;\n\t}\n\n\t&__section.social-preview__section {\n\t\twidth: clamp(200px, 100%, 600px);\n\t}\n\n\t&__container {\n\t\tbox-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\t\tbackground-color: #fff;\n\n\t\t&.small-preview {\n\t\t\t// When the preview has media,\n\t\t\t// we want to hide the border radius on the bottom\n\t\t\tborder-end-end-radius: 0;\n\t\t\tborder-end-start-radius: 0;\n\t\t}\n\t}\n\n\t&__header {\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t\tmargin-bottom: 8px;\n\t\talign-items: center;\n\n\t\t&--avatar {\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tborder-radius: 50%;\n\t\t\toverflow: hidden;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t&--avatar img {\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\n\t\t&--details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t&--name {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 1rem;\n\t\t\tline-height: 20px;\n\t\t\tletter-spacing: -0.32px;\n\t\t}\n\n\t\t&--meta {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0.25rem;\n\t\t\tcolor: #666;\n\t\t\tletter-spacing: -0.32px;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 19px;\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\t}\n\n\t&__footer {\n\t\tmargin-top: 24px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-end;\n\n\t\t&--actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 1rem;\n\t\t}\n\n\t\t&--actions-item {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0.25rem;\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 16px;\n\t\t}\n\t}\n\n\t&__content {\n\t\tpadding: 12px 16px;\n\t}\n\n\t&__card {\n\t\tborder-radius: 16px;\n\t\tbox-shadow:\n\t\t\trgba(0, 0, 0, 0.08) 0 1px 4px 0,\n\t\t\trgba(0, 0, 0, 0.2) 0 0 2px 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-top: 12px;\n\t\toverflow: hidden;\n\n\t\t&.small-preview {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&--chevron-wrapper {\n\t\t\twidth: 40px;\n\t\t\tmin-width: 40px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\n\t&__caption {\n\t\tmargin-bottom: 20px;\n\t\tfont-size: 1rem;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t}\n\n\t&__media-item {\n\t\tdisplay: flex;\n\n\t\timg,\n\t\tvideo {\n\t\t\twidth: 100%;\n\t\t\tobject-fit: cover;\n\t\t}\n\t}\n\n\t&__description {\n\t\tpadding: 16px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toverflow: hidden;\n\n\t\t.small-preview & {\n\t\t\tpadding: 10px;\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&--title {\n\t\t\tmargin: 0;\n\t\t\tfont-weight: 600;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tfont-size: 15px;\n\t\t\tline-height: 20px;\n\t\t}\n\n\t\t&--url {\n\t\t\tfont-size: 13px;\n\t\t\tcolor: #666;\n\t\t}\n\t}\n\n\t&__media {\n\t\t// compensate for the content padding\n\t\tmargin-inline: -16px;\n\t}\n\n\t&__image {\n\t\tobject-fit: cover;\n\t\twidth: 100%;\n\t\taspect-ratio: 16/9;\n\n\t\t.small-preview & {\n\t\t\twidth: 62px;\n\t\t\theight: 62px;\n\t\t}\n\t}\n\n\t&__default-avatar {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgb(140 110 99);\n\t\tcolor: #fff;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tfont-size: x-large;\n\t}\n\n\t&__default-image {\n\t\tbackground-color: #f1ffca;\n\t\theight: 62px;\n\t\twidth: 62px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n}\n",".bluesky-preview__post-actions {\n\tmargin-top: 0.5rem;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\n\t> div {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tcolor: rgb(111, 134, 159);\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n}\n","@use \"../../variables\" as vars;\n\n.bluesky-preview__body {\n\tmargin-bottom: 1rem;\n\n\tcolor: vars.$bluesky-body-text-color;\n\n\t> p {\n\t\tmargin-bottom: 1.25rem;\n\t}\n}\n\n","$bluesky-preview-width: 600px;\n$bluesky-preview-text-color: #444b5d;\n$bluesky-body-text-color: #000;\n$bluesky-preview-background-color: #fff;\n$bluesky-preview-font-family: \"bluesky-font-sans-serif\",sans-serif;\n$bluesky-preview-accent-color: #3a3bff;\n$bluesky-preview-border-radius: 8px;\n","@use \"../../variables\" as vars;\n\n.bluesky-preview__card {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-top: 1rem;\n\n\tborder: solid 1px #d9e1e8;\n\tborder-radius: 8px;\n\toverflow: hidden;\n\tcolor: vars.$bluesky-body-text-color;\n}\n\n.bluesky-preview__card-image img {\n\twidth: 100%;\n\tobject-fit: cover;\n}\n\n.bluesky-preview__card-text {\n\tborder-bottom-width: 1px;\n\tborder-left-width: 1px;\n\tborder-right-width: 1px;\n\tflex: 1 1 0%;\n\tpadding: 8px 14px;\n\tborder-color: rgb(212, 219, 226);\n\tborder-bottom-right-radius: 8px;\n\tborder-bottom-left-radius: 8px;\n}\n\n.bluesky-preview__card-title {\n\t-webkit-box-orient: vertical;\n\t-webkit-line-clamp: 3;\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: rgb(11, 15, 20);\n\tfont-size: 16px;\n\tfont-weight: 700;\n\tletter-spacing: 0.25px;\n}\n\n.bluesky-preview__card-site {\n\tfont-size: 14px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcolor: rgb(66, 87, 108);\n\tfont-weight: 400;\n\tletter-spacing: 0.25px;\n\tmargin-bottom: 2px;\n\tmargin-top: 2px;\n}\n\n.bluesky-preview__card-description {\n\t-webkit-box-orient: vertical;\n\t-webkit-line-clamp: 2;\n\tcolor: rgb(11, 15, 20);\n\tdisplay: -webkit-box;\n\tfont-size: 15px;\n\tfont-weight: 400;\n\tletter-spacing: 0.25px;\n\tmargin-top: 4px;\n\toverflow: hidden;\n}\n","$bluesky-preview-width: 600px;\n$bluesky-preview-text-color: #444b5d;\n$bluesky-body-text-color: #000;\n$bluesky-preview-background-color: #fff;\n$bluesky-preview-font-family: \"bluesky-font-sans-serif\",sans-serif;\n$bluesky-preview-accent-color: #3a3bff;\n$bluesky-preview-border-radius: 8px;\n",".bluesky-preview__post-header {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto auto;\n\talign-items: center;\n\tgap: 0.5rem;\n\tmax-width: max-content;\n\n\tmargin-bottom: 0.625rem;\n\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem;\n\tline-height: 1.47;\n\n\t&-user {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto auto;\n\t\talign-items: center;\n\t\tgap: 0.5rem;\n\t}\n\n\t&--displayname,\n\t&--username {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tmin-width: 2ch;\n\t}\n\n\t&--displayname {\n\t\tfont-size: 16px;\n\t\tletter-spacing: 0.25px;\n\t\tfont-weight: 700;\n\t\tline-height: 19px;\n\t\tcolor: rgb(11, 15, 20);\n\t\tmin-width: 3ch;\n\t}\n\n\t&--username,\n\t&--separator,\n\t&--date {\n\t\tfont-size: 15px;\n\t\tletter-spacing: 0.25px;\n\t\tfont-weight: 400;\n\t\tcolor: rgb(66, 87, 108);\n\t}\n\n}\n","\n.bluesky-preview__post-avatar {\n\twidth: 52px;\n\theight: 52px;\n\tborder-radius: 50%;\n}\n","@use \"./variables\" as vars;\n\n.bluesky-preview__section {\n\tmax-width: 100%;\n\twidth: vars.$bluesky-preview-width;\n\tmargin-inline: auto;\n}\n\n.bluesky-preview__post {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 10px;\n\tmax-width: vars.$bluesky-preview-width;\n\n\twidth: 100%;\n\toverflow-y: hidden;\n\tbox-sizing: border-box;\n\tpadding: 1rem;\n\n\tbackground-color: vars.$bluesky-preview-background-color;\n\tborder: 1px solid #c0cdd9;\n\tborder-radius: vars.$bluesky-preview-border-radius;\n\tcolor: vars.$bluesky-preview-text-color;\n\n\tfont-family: vars.$bluesky-preview-font-family;\n\t/* stylelint-disable-next-line scales/font-sizes */\n\tfont-size: 0.9375rem;\n\tline-height: 1.47;\n\n\t:any-link {\n\t\tcolor: vars.$bluesky-preview-accent-color;\n\n\t\ttext-decoration: none;\n\t}\n}\n\n.bluesky-preview__media {\n\tmargin-top: 8px;\n\tmin-height: 64px;\n\tborder-radius: 8px;\n\n\t&.as-grid {\n\t\tdisplay: grid;\n\t\tgap: 2px;\n\t\tgrid-template-columns: 50% 50%;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t}\n\n\t&-item {\n\t\tdisplay: flex;\n\t\tborder: 0;\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\n\t\timg,\n\t\tvideo {\n\t\t\twidth: 100%;\n\t\t\tobject-fit: cover;\n\t\t}\n\t}\n}\n","$bluesky-preview-width: 600px;\n$bluesky-preview-text-color: #444b5d;\n$bluesky-body-text-color: #000;\n$bluesky-preview-background-color: #fff;\n$bluesky-preview-font-family: \"bluesky-font-sans-serif\",sans-serif;\n$bluesky-preview-accent-color: #3a3bff;\n$bluesky-preview-border-radius: 8px;\n","/* stylelint-disable scales/radii */\n@use \"./variables\" as vars;\n\n.threads-preview {\n\tpadding: 20px;\n}\n\n.threads-preview__wrapper {\n\tbackground-color: #fff;\n\tmax-width: clamp(200px, 100%, 635px);\n\tmargin-inline: auto;\n\tpadding-top: 1rem;\n\tborder-radius: 4px;\n\tpadding-inline-end: 1rem;\n}\n\n.threads-preview__section.social-preview__section {\n\twidth: clamp(200px, 100%, 635px);\n\n\t// To compensate for the padding for profile picture in threads threads\n\t.social-preview__section-heading,\n\t.social-preview__section-desc {\n\t\tpadding-inline-start: 17px;\n\t}\n}\n\n.threads-preview__container {\n\tdisplay: grid;\n\tgrid-template-columns: 50px auto;\n\tmargin-bottom: 5px;\n\tfont-size: vars.$threads-font-size;\n\tline-height: vars.$threads-line-height;\n\tcolor: vars.$threads-text-primary-color;\n\n\t.threads-preview__sidebar {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 35px auto;\n\t\tjustify-items: center;\n\n\t\t.threads-preview__profile-image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmax-width: 36px;\n\t\t\tmax-height: 36px;\n\t\t\tborder-radius: 50%;\n\t\t\toverflow: hidden;\n\n\t\t\timg {\n\t\t\t\tobject-fit: cover;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\t.threads-preview__connector {\n\t\t\twidth: 2px;\n\t\t\tbackground-color: #8c8f94;\n\t\t}\n\t}\n\n\t.threads-preview__main {\n\t\tpadding-bottom: 1rem;\n\t\toverflow: hidden;\n\t}\n\n\t.threads-preview__header {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\tfont-size: 16px;\n\t\tline-height: 18px;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.threads-preview__name {\n\t\tfont-weight: 600;\n\t\tfont-size: 15px;\n\t}\n\n\t.threads-preview__date {\n\t\tcolor: vars.$threads-text-secondary-color;\n\t}\n\n\t.threads-preview__content {\n\n\t\t.threads-preview__text {\n\t\t\twhite-space: pre-wrap;\n\t\t\toverflow-wrap: break-word;\n\t\t}\n\n\t\t.threads-preview__media {\n\t\t\tborder-radius: 15px;\n\t\t\toverflow: hidden;\n\t\t\tdisplay: grid;\n\t\t\tgap: 2px;\n\t\t\tgrid-template-areas: \"a\";\n\t\t\theight: 300px;\n\t\t\tmargin-top: 12px;\n\n\t\t\timg,\n\t\t\tvideo {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\n\t\t\t\t&:nth-child(1) {\n\t\t\t\t\tgrid-area: a;\n\t\t\t\t}\n\n\t\t\t\t&:nth-child(2) {\n\t\t\t\t\tgrid-area: b;\n\t\t\t\t}\n\n\t\t\t\t&:nth-child(3) {\n\t\t\t\t\tgrid-area: c;\n\t\t\t\t}\n\n\t\t\t\t&:nth-child(4) {\n\t\t\t\t\tgrid-area: d;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.threads-preview__media-children-2 {\n\t\t\t\tgrid-template-areas: \"a b\";\n\t\t\t}\n\n\t\t\t&.threads-preview__media-children-3 {\n\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\"a b\"\n\t\t\t\t\t\"a c\";\n\t\t\t}\n\n\t\t\t&.threads-preview__media-children-4 {\n\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\"a b\"\n\t\t\t\t\t\"c d\";\n\t\t\t}\n\t\t}\n\n\t\t.threads-preview__card {\n\t\t\tmargin-top: 12px;\n\t\t\tmargin-bottom: 12px;\n\t\t\toverflow: hidden;\n\t\t\tborder: 1px solid #e1e8ed;\n\t\t\tborder-radius: 8px;\n\n\t\t\t.threads-preview__card-image {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\taspect-ratio: 16/9;\n\t\t\t}\n\n\t\t\t.threads-preview__card-body {\n\t\t\t\tpadding: 0.75em;\n\t\t\t\ttext-decoration: none;\n\t\t\t\tfont-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n\t\t\t\tcolor: var(--studio-black);\n\t\t\t\ttext-align: left;\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 2px;\n\t\t\t}\n\n\t\t\t.threads-preview__card-title {\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\n\t\t\t.threads-preview__card-url {\n\t\t\t\tfont-size: 12px;\n\t\t\t\ttext-transform: lowercase;\n\t\t\t\tcolor: vars.$threads-text-secondary-color;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow-inline: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\t\t}\n\t}\n\n\t.threads-preview__footer {\n\t\tdisplay: flex;\n\t\tgap: 2.5rem;\n\t\tmargin-top: 1rem;\n\n\t\tsvg {\n\t\t\theight: 19px;\n\t\t\twidth: 19px;\n\t\t\tfill: vars.$threads-actions-icon-color;\n\t\t}\n\t}\n\n\t.threads-preview__icon {\n\n\t\t&--like,\n\t\t&--reply,\n\t\t&--share {\n\n\t\t\tsvg {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: vars.$threads-actions-icon-color;\n\t\t\t}\n\t\t}\n\t}\n}\n","$threads-font-size: 15px !default;\n$threads-line-height: 21px !default;\n$threads-text-primary-color: rgb(0, 0, 0) !default;\n$threads-text-secondary-color: rgb(153, 153, 153) !default;\n$threads-actions-icon-color: rgb(66, 66, 66) !default;\n","\n\n.instagram-preview {\n\n\t&__wrapper {\n\t\tpadding: 20px;\n\t\tbackground-color: #fff;\n\t\tmargin-inline: auto;\n\t\tmax-width: clamp(200px, 100%, 555px);\n\t}\n\n\t// When the preview is in a section of all previews\n\t&__section &__wrapper {\n\t\tpadding: 0;\n\t}\n\n\t&__section.social-preview__section {\n\t\twidth: clamp(200px, 100%, 555px);\n\t}\n\n\t&__container {\n\n\t\tbox-shadow: 0