@tet/tet-components 1.4.30-testing → 1.4.31-staging

package/dist/collection/components/advanced/cards/tet-snicker-card/tet-snicker-card.css

@@ -0,0 +1,1115 @@
+/* Tet design styles */
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+:host {
+  --color-gray-light: #cdd2de;
+  --color-ta070: #f5f6f8;
+  --color-ta080: #e6e8ee;
+  --color-ta100: #cdd2de;
+  --color-ta200: #9ba5be;
+  --color-ta300: #69789c;
+  --color-ta500: #1e356a;
+  --color-ta600: #051d59;
+  --color-tc090: #d6e6fd;
+  --color-tc100: #d1dffe;
+  --color-tc300: #75a1fb;
+  --color-tc500: #1a70f6;
+  --color-tc600: #0060f5;
+  --color-td500: #00F1F2;
+  --color-td600: #01cbe0;
+  --color-tf600: #f53b2a;
+  --color-tg300: #2b3036;
+  --color-tg400: #1d2128;
+  --color-tg500: #12171e;
+  --color-tg600: #01050c;
+  --color-th500: #f5f5f5;
+  --color-ti500: #869198;
+  --color-ti600: #aeb7bc;
+  --text-font: Gilroy, serif;
+  --text-color-darker: var(--color-ta600);
+  --text-color-dark: var(--color-ta500);
+  --text-color-dark-theme: var(--color-th500);
+  --icons-font: Tet Icons, serif;
+}
+
+.icon.tet-search {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-search::before {
+  content: "\e86e";
+}
+.icon.tet-close-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close-circled::before {
+  content: "\e85a";
+}
+.icon.tet-close {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close::before {
+  content: "\e85b";
+}
+.icon.tet-check-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check-circled::before {
+  content: "\e86c";
+}
+.icon.tet-check {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check::before {
+  content: "\e855";
+}
+.icon.tet-chevron-up {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-up::before {
+  content: "\e859";
+}
+.icon.tet-chevron-down {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-down::before {
+  content: "\e856";
+}
+.icon.tet-clipboard {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-clipboard::before {
+  content: "\e86a";
+}
+.icon.tet-info {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-info::before {
+  content: "\e81d";
+}
+.icon.tet-done {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-done::before {
+  content: "\e867";
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+:host {
+  --font-family-fallback: Gilroy, Arial, sans-serif;
+  --font-family-headline: Gilroy;
+  --font-family-content: Inter, var(--font-family-fallback);
+  font-family: var(--font-family-content);
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+:host {
+  --font-family-fallback: Gilroy, Arial, sans-serif;
+  --font-family-headline: Gilroy;
+  --font-family-content: Inter, var(--font-family-fallback);
+  font-family: var(--font-family-content);
+}
+
+:root {
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
+  --tet-link-secondary-color: var(--tc-text-secondary);
+  --tet-link-secondary-color-hover: var(--tc-text-primary);
+}
+
+.tet-link,
+.tet-link__arrow {
+  text-decoration: underline;
+  color: var(--tet-link-color);
+  position: relative;
+  line-height: 1.5rem;
+  cursor: pointer;
+}
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+  --tet-link-secondary-color: var(--tc-text-secondary-dark);
+  --tet-link-secondary-color-hover: var(--tc-text-primary-dark);
+}
+.tet-link.tet-link--secondary,
+.tet-link__arrow.tet-link--secondary {
+  --tet-link-color: var(--tet-link-secondary-color);
+  --tet-link-color-hover: var(--tet-link-secondary-color-hover);
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  --icon-color: var(--tet-link-color);
+}
+.tet-link:hover,
+.tet-link__arrow:hover {
+  color: var(--tet-link-color-hover);
+}
+.tet-link:hover tet-icon,
+.tet-link__arrow:hover tet-icon {
+  --icon-color: var(--tet-link-color-hover);
+}
+.tet-link:active,
+.tet-link__arrow:active {
+  color: var(--tet-link-color-active);
+}
+.tet-link:active tet-icon,
+.tet-link__arrow:active tet-icon {
+  --icon-color: var(--tet-link-color-active);
+}
+.tet-link:focus-visible,
+.tet-link__arrow:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--tet-link-color-focus);
+  border-radius: 0.125rem;
+}
+.tet-link.disabled,
+.tet-link__arrow.disabled {
+  color: var(--tet-link-color-disabled);
+  pointer-events: none;
+  cursor: auto;
+}
+.tet-link.disabled tet-icon,
+.tet-link__arrow.disabled tet-icon {
+  --icon-color: var(--tet-link-color-disabled);
+}
+.tet-link.disabled:focus-visible,
+.tet-link__arrow.disabled:focus-visible {
+  outline: none;
+}
+.tet-link tet-icon,
+.tet-link__arrow tet-icon {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --icon-container-display: inline-block;
+}
+
+.tet-link__arrow {
+  padding-right: 1.5rem;
+}
+.tet-link__arrow::after {
+  content: "-->";
+  position: absolute;
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  padding-left: 0.25rem;
+  letter-spacing: initial;
+  transition: all 0.15s ease-in;
+}
+.tet-link__arrow:hover::after {
+  padding-left: 0.375rem;
+}
+
+:host {
+  display: block;
+}
+
+.light {
+  --snicker-card-background: var(--tc-layer-primary);
+  --snicker-card-subscribed-background: var(--tc-layer-secondary);
+  --snicker-card-subscription-strip-background: var(--tc-layer-quaternary);
+  --snicker-card-border-color: var(--tc-border-quaternary);
+  --snicker-card-border-hover-color: var(--tc-border-secondary);
+  --snicker-card-border-selected-color: var(--tc-border-primary);
+  --snicker-card-divider: 0.03125rem solid var(--tc-border-quaternary);
+  --snicker-card-text-primary: var(--tc-text-primary);
+  --snicker-card-text-secondary: var(--tc-text-secondary);
+  --snicker-card-text-tertiary: var(--tc-text-tertiary);
+  --snicker-card-unavailable-color: var(--tc-text-tertiary);
+  --snicker-card-disabled-color: var(--tc-button-text-inverse-disabled);
+  --snicker-card-toggle-color: var(--tc-text-primary);
+  --snicker-card-shadow: var(--tc-elevation-one);
+  --snicker-card-selected-shadow: var(--tc-elevation-two);
+  --snicker-card-badge-background: var(--tc-yellow-40);
+  --snicker-card-focus-outline-color: var(--tc-blue-40);
+}
+
+.dark {
+  --snicker-card-background: var(--tc-layer-primary-dark);
+  --snicker-card-subscribed-background: var(--tc-layer-secondary-dark);
+  --snicker-card-subscription-strip-background: var(--tc-layer-quaternary-dark);
+  --snicker-card-border-color: var(--tc-border-quaternary-dark);
+  --snicker-card-border-hover-color: var(--tc-border-secondary-dark);
+  --snicker-card-border-selected-color: var(--tc-border-primary-dark);
+  --snicker-card-divider: 0.03125rem solid var(--tc-border-quaternary-dark);
+  --snicker-card-text-primary: var(--tc-text-primary-dark);
+  --snicker-card-text-secondary: var(--tc-text-secondary-dark);
+  --snicker-card-text-tertiary: var(--tc-text-tertiary-dark);
+  --snicker-card-unavailable-color: var(--tc-text-tertiary-dark);
+  --snicker-card-disabled-color: var(--tc-button-text-inverse-disabled-dark);
+  --snicker-card-toggle-color: var(--tc-text-primary-dark);
+  --snicker-card-shadow: var(--tc-elevation-one-dark);
+  --snicker-card-selected-shadow: var(--tc-elevation-two-dark);
+  --snicker-card-badge-background: var(--tc-yellow-40-dark);
+  --snicker-card-focus-outline-color: var(--tc-blue-40-dark);
+}
+
+.snicker-card {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 1rem;
+  border: 0.0625rem solid var(--snicker-card-border-color);
+  border-radius: 1rem;
+  background-color: var(--snicker-card-background);
+  box-shadow: var(--snicker-card-shadow);
+  color: var(--snicker-card-text-primary);
+}
+.snicker-card--hoverable {
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .snicker-card--hoverable:hover {
+    border-color: var(--snicker-card-border-hover-color);
+    box-shadow: inset 0 0 0 0.0625rem var(--snicker-card-border-hover-color), var(--snicker-card-shadow);
+  }
+}
+.snicker-card:has(.header__top-left:focus-visible) {
+  box-shadow: none;
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0rem;
+  transition: outline 0s;
+}
+@media screen and (min-width: 31.25rem) {
+  .snicker-card {
+    padding: 1.5rem;
+  }
+}
+.snicker-card--with-badge {
+  margin-top: 0.875rem;
+}
+.snicker-card--selected {
+  border-color: var(--snicker-card-border-selected-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--snicker-card-border-selected-color), var(--snicker-card-selected-shadow);
+}
+.snicker-card--subscribed {
+  background-color: var(--snicker-card-subscribed-background);
+}
+.snicker-card--unavailable {
+  --snicker-card-text-primary: var(--snicker-card-unavailable-color);
+  --snicker-card-text-secondary: var(--snicker-card-unavailable-color);
+  --snicker-card-text-tertiary: var(--snicker-card-unavailable-color);
+}
+.snicker-card--disabled {
+  --snicker-card-text-primary: var(--snicker-card-disabled-color);
+  --snicker-card-text-secondary: var(--snicker-card-disabled-color);
+  --snicker-card-text-tertiary: var(--snicker-card-disabled-color);
+}
+.snicker-card__badge {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  color: var(--tc-text-black-permanent);
+  background-color: var(--snicker-card-badge-background);
+  padding: 0.375rem 1.25rem;
+  border-radius: 6.25rem;
+  box-shadow: var(--snicker-card-shadow);
+  width: fit-content;
+  white-space: nowrap;
+  font: 600 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media (min-width: 26.375rem) {
+  .snicker-card__badge {
+    left: 1.5rem;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+.subscription-strip {
+  margin: -1rem -1rem 1rem;
+  background-color: var(--snicker-card-subscription-strip-background);
+  padding: 0.75rem 1rem;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  box-sizing: border-box;
+}
+@media screen and (min-width: 31.25rem) {
+  .subscription-strip {
+    margin: -1.5rem -1.5rem 1rem;
+    padding: 0.75rem 1.5rem;
+  }
+}
+.subscription-strip__label {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  margin: 0;
+  color: var(--snicker-card-text-primary);
+}
+
+.accordion {
+  --accordion-background-color: transparent;
+  --accordion-header-mobile-padding: 0;
+  --accordion-header-padding: 0;
+  --accordion-header-font: inherit;
+  --accordion-header-mobile-font: inherit;
+  --accordion-header-text-desktop-margin-right: 0;
+  --accordion-border-bottom-width: 0;
+  --accordion-outer-border: none;
+  display: block;
+  width: 100%;
+}
+.accordion__header {
+  width: 100%;
+  cursor: default;
+}
+.accordion__content {
+  width: 100%;
+}
+
+.with-divider {
+  border-bottom: var(--snicker-card-divider);
+  padding-bottom: 1rem;
+}
+
+.button-naked {
+  background: unset;
+  border: unset;
+  cursor: pointer;
+  appearance: none;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.25rem;
+}
+.header--hoverable {
+  cursor: pointer;
+}
+@media screen and (min-width: 31.25rem) {
+  .header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "top price" "subtitle price" "description price";
+    column-gap: 1.5rem;
+    row-gap: 0.125rem;
+    align-items: start;
+  }
+}
+.header--closed {
+  border-bottom: 0;
+  padding-bottom: 0.25rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .header--no-price {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "top" "subtitle" "description";
+  }
+}
+.header__top {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .header__top {
+    grid-area: top;
+    justify-content: flex-start;
+  }
+}
+.header__top-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem 0;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.header__top-left:focus-visible {
+  outline: none;
+}
+.header__selector {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.header__content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (min-width: 31.25rem) {
+  .header__content {
+    display: contents;
+  }
+}
+.header__title {
+  font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  margin: 0;
+  color: var(--snicker-card-text-primary);
+}
+.header__subtitle {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--snicker-card-text-primary);
+}
+@media screen and (min-width: 31.25rem) {
+  .header__subtitle {
+    grid-area: subtitle;
+  }
+}
+.header__description {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  margin: 0;
+  color: var(--snicker-card-text-secondary);
+}
+@media screen and (min-width: 31.25rem) {
+  .header__description {
+    grid-area: description;
+  }
+}
+.header__price-line {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0.125rem 0 0;
+  color: var(--snicker-card-text-primary);
+  flex-wrap: nowrap;
+}
+@media screen and (min-width: 31.25rem) {
+  .header__price-line {
+    grid-area: price;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.1875rem;
+    margin: 0;
+    align-self: start;
+  }
+}
+.header__accordion-toggle {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border-radius: 0.125rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.5rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .header__accordion-toggle {
+    display: none;
+  }
+}
+.header__accordion-toggle:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.0625rem;
+  transition: outline 0s;
+}
+.header__accordion-toggle-icon {
+  --icon-size: 1.25rem;
+  --icon-container-display: flex;
+  transition: transform 150ms ease-out;
+}
+.header__accordion-toggle-icon.open {
+  transform: rotate(-180deg);
+}
+.header__price-main {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+.header__price-prefix {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media screen and (min-width: 31.25rem) {
+  .header__price-prefix {
+    font: 600 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  }
+}
+.header__price-value {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media screen and (min-width: 31.25rem) {
+  .header__price-value {
+    font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  }
+}
+.header__price-suffix {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media screen and (min-width: 31.25rem) {
+  .header__price-suffix {
+    font: 600 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  }
+}
+.header__old-price {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--snicker-card-text-tertiary);
+  text-decoration: line-through;
+  white-space: nowrap;
+}
+@media screen and (min-width: 31.25rem) {
+  .header__old-price {
+    text-align: right;
+  }
+}
+
+.message {
+  width: 100%;
+  padding-top: 1rem;
+}
+.message__inline {
+  width: 100%;
+  --inline-message-padding: 0;
+  --inline-message-border-bottom: none;
+}
+
+.selection {
+  width: 100%;
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: stretch;
+}
+@media screen and (min-width: 31.25rem) {
+  .selection {
+    flex-direction: row;
+    align-items: flex-end;
+    flex-wrap: nowrap;
+    gap: 0.75rem;
+  }
+}
+.selection__dropdown {
+  display: block;
+  width: 100%;
+}
+@media screen and (min-width: 31.25rem) {
+  .selection__dropdown {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+  }
+}
+.selection__stepper {
+  display: block;
+  align-self: center;
+}
+@media screen and (min-width: 31.25rem) {
+  .selection__stepper {
+    flex: 0 0 auto;
+    align-self: flex-end;
+  }
+}
+.selection__button {
+  align-self: center;
+  --button-padding-medium: 0.625rem 1rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .selection__button {
+    flex: 0 0 auto;
+    align-self: flex-end;
+    margin-left: auto;
+  }
+}
+.selection__button::part(button) {
+  transition: none;
+}
+@media screen and (min-width: 31.25rem) {
+  .selection__button--in-cart {
+    --button-padding-medium: 0.625rem;
+  }
+}
+.selection__button--desktop {
+  display: none;
+}
+@media screen and (min-width: 31.25rem) {
+  .selection__button--desktop {
+    display: inline-flex;
+  }
+}
+@media screen and (min-width: 31.25rem) {
+  .selection__button--mobile {
+    display: none;
+  }
+}
+
+.benefits {
+  list-style: none;
+  margin: 0;
+  padding: 1rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.benefits__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.benefits__icon {
+  --icon-size: 1rem;
+  --icon-container-display: flex;
+}
+.benefits__text {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--snicker-card-text-primary);
+}
+.benefits__link {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.benefits__link--unavailable {
+  --tet-link-color: var(--snicker-card-unavailable-color);
+  --tet-link-color-hover: var(--snicker-card-unavailable-color);
+  --tet-link-color-active: var(--snicker-card-unavailable-color);
+}
+
+.packages {
+  padding-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.packages__item {
+  display: inline-flex;
+  align-items: center;
+}
+.packages__image {
+  display: block;
+  width: auto;
+  height: 1.5rem;
+}
+
+.subscriptions {
+  display: flex;
+  flex-direction: column;
+  gap: 0 1rem;
+  padding: 0.25rem 0 0 0;
+}
+.subscriptions__item {
+  padding: 0.75rem 0;
+  display: inline-flex;
+  align-items: center;
+}
+.subscriptions__image {
+  display: block;
+  width: auto;
+  height: 1.5rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .subscriptions {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.footer {
+  padding-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.footer--desktop-only {
+  display: none;
+}
+@media screen and (min-width: 31.25rem) {
+  .footer--desktop-only {
+    display: block;
+  }
+}
+.footer__contract {
+  min-height: 0;
+}
+.footer__info {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 1.5rem;
+}
+.footer__remark {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  margin: 0;
+  color: var(--snicker-card-text-secondary);
+  overflow-wrap: anywhere;
+}
+.footer__toggle {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  border: 0;
+  background: transparent;
+  border-radius: 0.125rem;
+  color: var(--snicker-card-toggle-color);
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  margin-left: auto;
+  display: none;
+}
+@media screen and (min-width: 31.25rem) {
+  .footer__toggle {
+    display: inline-flex;
+  }
+}
+.footer__toggle:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.0625rem;
+  transition: outline 0s;
+}
+.footer__toggle-icon {
+  --icon-size: 1.25rem;
+  --icon-container-display: flex;
+  transition: transform 150ms ease-out;
+}
+.footer__toggle-icon.open {
+  transform: rotate(-180deg);
+}