#snackys-tpl .to-printer-selector__heading-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); margin-bottom: var(--spacing-4); } #snackys-tpl .to-printer-selector__heading { margin: 0; color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 20px; font-weight: var(--font-weight-bold); line-height: 1; } #snackys-tpl .to-printer-selector__help, #snackys-tpl .to-printer-selector__help:visited, #snackys-tpl .to-printer-selector__help:hover, #snackys-tpl .to-printer-selector__help:focus, #snackys-tpl .to-printer-selector__help:active { display: inline-flex; align-items: center; gap: var(--spacing-1); margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-primary-100); font-family: inherit; font-size: 1em; line-height: 1; text-decoration: none !important; cursor: pointer; } #snackys-tpl .to-printer-selector__help:hover, #snackys-tpl .to-printer-selector__help:focus { color: var(--color-primary-100); } #snackys-tpl .to-printer-selector__help-icon { flex: 0 0 16px; width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } #snackys-tpl .to-printer-selector__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-1); overflow: visible; } #snackys-tpl .to-printer-selector__field { position: relative; z-index: 0; min-width: 0; min-height: 44px; margin: 0; } #snackys-tpl .to-printer-selector__field:has(.to-printer-selector__dropdown[open]) { z-index: 4; } #snackys-tpl .to-printer-selector__field select { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; } #snackys-tpl .to-printer-selector__dropdown { position: relative; width: 100%; } #snackys-tpl .to-printer-selector__dropdown summary { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; margin: 0; padding: 0 12px 0 40px; border: 2px solid var(--color-tertiary-100); border-radius: var(--border-radius-sm); background: var(--color-white); color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1; list-style: none; cursor: pointer; } #snackys-tpl .to-printer-selector__dropdown summary::-webkit-details-marker { display: none; } #snackys-tpl .to-printer-selector__value { flex: 1 1 auto; min-width: 0; overflow: hidden; } #snackys-tpl .to-printer-selector__value-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } #snackys-tpl .to-printer-selector__value.is-marquee:hover .to-printer-selector__value-text, #snackys-tpl .to-printer-selector__dropdown summary:hover .to-printer-selector__value.is-marquee .to-printer-selector__value-text, #snackys-tpl .to-printer-selector__dropdown summary:focus-visible .to-printer-selector__value.is-marquee .to-printer-selector__value-text { max-width: none; text-overflow: clip; animation: to-printer-value-marquee var(--to-marquee-duration, 6s) ease-in-out infinite alternate; } @keyframes to-printer-value-marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(calc(-1 * var(--to-marquee-distance, 0px))); } } @media (prefers-reduced-motion: reduce) { #snackys-tpl .to-printer-selector__value.is-marquee:hover .to-printer-selector__value-text, #snackys-tpl .to-printer-selector__dropdown summary:hover .to-printer-selector__value.is-marquee .to-printer-selector__value-text, #snackys-tpl .to-printer-selector__dropdown summary:focus-visible .to-printer-selector__value.is-marquee .to-printer-selector__value-text { animation: none; } } #snackys-tpl .to-printer-selector__dropdown[open] summary { border-color: var(--color-primary-100); box-shadow: 0 0 0 2px rgba(0, 34, 147, .12); } #snackys-tpl .to-printer-selector__dropdown[open] .to-printer-selector__chevron { transform: rotate(180deg); } #snackys-tpl .to-printer-selector__dropdown.is-disabled summary, #snackys-tpl .to-printer-selector__field:has(select:disabled) summary { border-color: var(--color-tertiary-75); color: var(--color-primary-50); cursor: not-allowed; } #snackys-tpl .to-printer-selector__dropdown:not(.is-disabled) summary:hover, #snackys-tpl .to-printer-selector__dropdown:not(.is-disabled) summary:focus { border-color: var(--color-primary-100); outline: none; box-shadow: 0 0 0 2px rgba(0, 34, 147, .12); } #snackys-tpl .to-printer-selector[data-selector-modal="1"]:is(.to-printer-selector--hero, .to-printer-selector--header) { --to-selector-arrow-size: calc(var(--spacing-6) + var(--spacing-1)); --to-selector-arrow-strip: var(--spacing-10); } #snackys-tpl .to-printer-selector[data-selector-modal="1"].to-printer-selector--header { --to-selector-arrow-size: calc(var(--spacing-6) + var(--spacing-1) - var(--spacing-2)); --to-selector-arrow-strip: calc(var(--spacing-10) - var(--spacing-2)); } #snackys-tpl .to-printer-selector[data-selector-modal="1"]:is(.to-printer-selector--hero, .to-printer-selector--header) .to-printer-selector__dropdown summary { padding-right: calc((var(--to-selector-arrow-strip) - var(--to-selector-arrow-size)) / 2); box-shadow: inset calc(-1 * var(--to-selector-arrow-strip)) 0 0 color-mix(in srgb, var(--color-primary-100) 12%, transparent); } #snackys-tpl .to-printer-selector[data-selector-modal="1"]:is(.to-printer-selector--hero, .to-printer-selector--header) .to-printer-selector__dropdown:not(.is-disabled) summary:is(:hover, :focus) { box-shadow: inset calc(-1 * var(--to-selector-arrow-strip)) 0 0 color-mix(in srgb, var(--color-primary-100) 12%, transparent), 0 0 0 2px color-mix(in srgb, var(--color-primary-100) 12%, transparent); } #snackys-tpl .to-printer-selector[data-selector-modal="1"]:is(.to-printer-selector--hero, .to-printer-selector--header) .to-printer-selector__chevron { flex: 0 0 var(--to-selector-arrow-size); width: var(--to-selector-arrow-size); height: var(--to-selector-arrow-size); margin-left: var(--spacing-2); transform: rotate(-90deg); } #snackys-tpl .to-printer-selector__menu { display: grid; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: 100%; min-width: max-content; max-width: min(360px, 90vw); max-height: min(280px, 50vh); overflow: auto; padding: 6px; border: 1px solid var(--color-tertiary-50); border-radius: 6px; background: var(--color-white); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); gap: 3px; } #snackys-tpl .to-printer-selector__option { width: 100%; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 4px; background: var(--color-white); color: var(--color-neutral); font-family: inherit; font-size: 16px; font-weight: 400; text-align: left; white-space: nowrap; cursor: pointer; } #snackys-tpl .to-printer-selector__option:hover { background: var(--color-tertiary-50); color: var(--color-neutral); } #snackys-tpl .to-printer-selector__option.is-active { background: var(--color-primary-100); color: #FFF; font-weight: 600; } body.to-printer-selector-modal-open { overflow: hidden; } #snackys-tpl .to-printer-selector-modal[hidden] { display: none !important; } #snackys-tpl .to-printer-selector-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 28px 24px; } #snackys-tpl .to-printer-selector-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-primary-100) 75%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #snackys-tpl .to-printer-selector-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(991px, 100%); height: min(720px, calc(100vh - 56px)); max-height: calc(100vh - 56px); box-sizing: border-box; padding: 24px; border-radius: var(--border-radius-sm); background: var(--color-white); box-shadow: 0 12px 36px rgb(0 0 0 / 24%); } #snackys-tpl .to-printer-selector-modal__header, #snackys-tpl .to-printer-selector-modal__crumb { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--spacing-3); } #snackys-tpl .to-printer-selector-modal__header h2 { margin: 0; color: var(--color-primary-100); font-size: var(--font-size-h4); } #snackys-tpl .to-printer-selector-modal__header button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--color-neutral); line-height: 0; } #snackys-tpl .to-printer-selector-modal__header button svg { display: block; width: 30px; height: 30px; } #snackys-tpl .to-printer-selector-modal__crumb { min-height: 24px; margin-top: var(--spacing-1); color: var(--color-neutral); font-size: var(--font-size-xs); } #snackys-tpl .to-printer-selector-modal__search { position: relative; display: block; flex: 0 0 auto; margin: 0 0 var(--spacing-3); } #snackys-tpl .to-printer-selector-modal__search[hidden] { display: none !important; } #snackys-tpl .to-printer-selector-modal__steps { display: flex; flex: 0 0 auto; gap: var(--spacing-1); margin-top: var(--spacing-4); margin-bottom: var(--spacing-6); } #snackys-tpl .to-printer-selector-modal__step { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: var(--spacing-10); padding: var(--spacing-2) var(--spacing-6); border: 0; background: var(--color-tertiary-50); color: var(--color-neutral); font-family: inherit; font-size: var(--font-size-normal); font-weight: var(--font-weight-bold); text-transform: uppercase; line-height: 1.2; clip-path: polygon(0 0, calc(100% - var(--spacing-4)) 0, 100% 50%, calc(100% - var(--spacing-4)) 100%, 0 100%, var(--spacing-4) 50%); transition: background-color .2s ease, color .2s ease; cursor: pointer; } #snackys-tpl .to-printer-selector-modal__step:first-child { border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); clip-path: polygon(0 0, calc(100% - var(--spacing-4)) 0, 100% 50%, calc(100% - var(--spacing-4)) 100%, 0 100%); } #snackys-tpl .to-printer-selector-modal__step:not(:first-child) { margin-left: calc(-1 * var(--spacing-3)); } #snackys-tpl .to-printer-selector-modal__step.is-done { background: var(--color-success-soft); color: var(--color-success); } /**/ #snackys-tpl .to-printer-selector-modal__step-outline { position: absolute; inset: 0; display: none; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; color: var(--color-success); pointer-events: none; } #snackys-tpl .to-printer-selector-modal__step.is-done .to-printer-selector-modal__step-outline { display: block; } #snackys-tpl .to-printer-selector-modal__step > span { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: var(--spacing-2); } #snackys-tpl .to-printer-selector-modal__step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #snackys-tpl .to-printer-selector-modal__step-check { display: none; flex: 0 0 auto; width: 20px; height: 20px; } #snackys-tpl .to-printer-selector-modal__step.is-done .to-printer-selector-modal__step-check { display: block; } #snackys-tpl .to-printer-selector-modal__step-edit { display: none; flex: 0 0 auto; width: 20px; height: 20px; } #snackys-tpl .to-printer-selector-modal__step.is-current .to-printer-selector-modal__step-edit { display: block; } #snackys-tpl .to-printer-selector-modal__step.is-current, #snackys-tpl .to-printer-selector-modal__step.is-done:hover, #snackys-tpl .to-printer-selector-modal__step:focus-visible { background: var(--color-success); color: var(--color-success-soft); } #snackys-tpl .to-printer-selector-modal__step:disabled { opacity: 1; cursor: not-allowed; } @media (max-width: 767.98px) { #snackys-tpl .to-printer-selector-modal__step { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-xs); } #snackys-tpl .to-printer-selector-modal__step > span { gap: var(--spacing-1); } } #snackys-tpl .to-printer-selector-modal__search input { width: 100%; padding: var(--spacing-2) var(--spacing-12) var(--spacing-2) var(--spacing-4); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm); color: var(--color-primary-100); } #snackys-tpl .to-printer-selector-modal__search input:focus { outline: none; box-shadow: none; border-color: var(--color-tertiary-75); } #snackys-tpl .to-printer-selector-modal__search .to-clp-search__icon { position: absolute; top: 50%; right: var(--spacing-4); display: block; width: 20px; height: 20px; fill: var(--color-primary-100); stroke: var(--color-primary-100); stroke-width: 1; paint-order: stroke fill; pointer-events: none; transform: translateY(-50%); } #snackys-tpl .to-printer-selector-modal__body { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 0; } #snackys-tpl .to-printer-selector-modal__body::after { content: ""; position: absolute; z-index: 2; pointer-events: none; right: 0; bottom: -10px; left: 0; height: 130px; background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--color-white) 72%); opacity: 0; transition: opacity .2s ease; } @keyframes to-printer-modal-wheel { 0%, 100% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(8px); } } @keyframes to-printer-modal-chevron { 0%, 100% { opacity: 0; transform: rotate(45deg) translate(-2px, -2px); } 40%, 60% { opacity: 1; transform: rotate(45deg) translate(0, 0); } } #snackys-tpl .to-printer-selector-modal__body.is-scrolling::after, #snackys-tpl .to-printer-selector-modal__body.is-scrolling .to-clp-swipe { opacity: 0 !important; visibility: hidden; transition: none !important; } #snackys-tpl .to-printer-selector-modal__body.is-scrolling .to-clp-swipe__wheel, #snackys-tpl .to-printer-selector-modal__body.is-scrolling .to-clp-swipe__chevrons span { animation: none !important; } #snackys-tpl .to-printer-selector-modal__list { display: grid; flex: 1 1 auto; align-content: start; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-2); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; overflow-anchor: none; } #snackys-tpl .to-printer-selector-modal__list--series { grid-template-columns: repeat(2, minmax(0, 1fr)); } #snackys-tpl .to-printer-selector-modal__group { display: flex; flex-direction: column; grid-column: 1 / -1; min-width: 0; margin-bottom: var(--spacing-3); } #snackys-tpl .to-printer-selector-modal__group-heading { position: relative; z-index: 1; display: flex; align-self: flex-start; align-items: center; gap: var(--spacing-3); max-width: 100%; margin-bottom: -2px; padding: var(--spacing-2) var(--spacing-4); border: 2px solid var(--color-tertiary-75); border-bottom-color: var(--color-secondary-50); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; background: var(--color-secondary-50); } #snackys-tpl .to-printer-selector-modal__group-heading::before { content: ""; position: absolute; bottom: -2px; left: 100%; z-index: 1; width: 15px; height: 15px; pointer-events: none; background-color: var(--color-secondary-50); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23fff'/%3E%3C/svg%3E") left top / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23fff'/%3E%3C/svg%3E") left top / 12px 12px no-repeat; transform: rotate(180deg) scaleX(-1); } #snackys-tpl .to-printer-selector-modal__group-heading::after { content: ""; position: absolute; bottom: -2px; left: 100%; z-index: 0; display: block; width: 15px; height: 15px; pointer-events: none; background-color: var(--color-tertiary-75); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23fff'/%3E%3Cpath d='M15 0A15 15 0 0 0 0 15' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 15px 15px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23fff'/%3E%3Cpath d='M15 0A15 15 0 0 0 0 15' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: 15px 15px; transform: rotate(180deg) scaleX(-1); } #snackys-tpl .to-printer-selector-modal__group-heading h3 { flex: 0 0 auto; margin: 0; color: var(--color-primary-100); font-size: var(--font-size-h6); font-weight: var(--font-weight-bold); text-transform: uppercase; } #snackys-tpl .to-printer-selector-modal__group-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); min-width: 0; padding: var(--spacing-3); border: 2px solid var(--color-tertiary-75); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm); background: var(--color-secondary-50); } #snackys-tpl .to-printer-selector-modal__group-heading .to-printer-selector-modal__group-count { background: var(--color-tertiary-50); color: var(--color-primary-100); } #snackys-tpl .to-printer-selector-modal__list--models { grid-template-columns: repeat(2, minmax(0, 1fr)); } #snackys-tpl .to-printer-selector-modal__list--series .to-printer-selector-modal__option { --to-series-arrow-size: var(--spacing-6); padding-right: calc((var(--spacing-10) - var(--to-series-arrow-size)) / 2); box-shadow: inset calc(-1 * var(--spacing-10)) 0 0 color-mix(in srgb, var(--color-primary-100) 12%, transparent); font-size: var(--font-size-h6); } #snackys-tpl .to-printer-selector-modal__series-next { display: block; flex: 0 0 var(--to-series-arrow-size); width: var(--to-series-arrow-size); height: var(--to-series-arrow-size); margin-left: var(--spacing-2); pointer-events: none; } #snackys-tpl .to-printer-selector-modal__series-main { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3); min-width: 0; } #snackys-tpl .to-printer-selector-modal__series-logo { display: block; flex: 0 0 auto; width: auto; max-width: calc(72px * var(--brand-logo-scale, 1)); max-height: calc(18px * var(--brand-logo-scale, 1)); object-fit: contain; object-position: left center; } #snackys-tpl .to-printer-selector-modal__series-logo--wide { max-width: calc(88px * var(--brand-logo-scale, 1)); max-height: calc(22px * var(--brand-logo-scale, 1)); } #snackys-tpl .to-printer-selector-modal__series-name { min-width: 0; overflow-wrap: anywhere; } #snackys-tpl .to-printer-selector-modal__list--models .to-printer-selector-modal__option { font-size: var(--font-size-h6); } #snackys-tpl .to-printer-selector-modal__list--models .to-printer-selector-modal__option { flex-direction: column; min-width: 0; min-height: 214px; padding: var(--spacing-4); gap: 0; text-align: center; transition: transform .2s ease, border-color .2s ease; } #snackys-tpl .to-printer-selector-modal__option:hover, #snackys-tpl .to-printer-selector-modal__option:focus-visible { transform: scale(1.01); } #snackys-tpl .to-printer-selector-modal__model-logo, #snackys-tpl .to-printer-selector-modal__model-brand { flex: 0 0 auto; max-width: 100%; height: calc(15px * var(--brand-logo-scale, 1)); margin: 0 auto var(--spacing-1); font-size: var(--font-size-xs); object-fit: contain; } #snackys-tpl .to-printer-selector-modal__model-media { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-height: 85px; } #snackys-tpl .to-printer-selector-modal__model-image { display: block; width: 100%; height: 85px; object-fit: contain; object-position: center; mix-blend-mode: darken; pointer-events: none; } #snackys-tpl .to-printer-selector-modal__model-name { width: 100%; margin: var(--spacing-2) 0; font-size: var(--font-size-h6); line-height: 1.2; overflow-wrap: anywhere; } @media (min-width: 992px) { #snackys-tpl .to-printer-selector-modal__list--models { grid-template-columns: repeat(5, minmax(0, 1fr)); } } #snackys-tpl .to-printer-selector-modal__option { display: flex; align-items: center; gap: var(--spacing-2); min-height: 44px; padding: var(--spacing-2) var(--spacing-6); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm); background: var(--color-white); color: var(--color-primary-100); text-align: left; cursor: pointer; transform-origin: var(--option-scale-origin, center); transition: transform .2s ease, background-color .2s ease, border-color .2s ease; } #snackys-tpl .to-printer-selector-modal__brand-logo { display: block; flex: 0 0 auto; width: auto; max-width: calc(110px * var(--brand-logo-scale, 1)); height: calc(35px * var(--brand-logo-scale, 1)); object-fit: contain; } #snackys-tpl .to-printer-selector-modal__option--brand { min-height: 120px; justify-content: center; } /**/ #snackys-tpl .to-printer-selector-modal__body.show-swipe::after { opacity: 1; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe { display: flex; position: absolute; right: auto; bottom: calc(var(--spacing-3) + 12px); left: 50%; z-index: 3; flex-direction: row; align-items: center; justify-content: center; gap: 0; width: max-content; pointer-events: none; opacity: 0; color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1.2; text-transform: uppercase; transform: translateX(-50%); transition: opacity .2s ease; } #snackys-tpl .to-printer-selector-modal__body.show-swipe .to-clp-swipe { opacity: 1; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__clip { display: block; position: relative; flex: 0 0 auto; width: 30px; height: 40px; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__mouse { display: block; position: relative; width: 16px; height: 26px; margin: 6px auto 0; border: 1.6px solid var(--color-primary-100); border-radius: 10px; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__wheel { display: block; width: 2px; height: 5px; margin: 5px auto 0; border-radius: 1px; background: var(--color-primary-100); animation: to-printer-modal-wheel 1.15s ease-in-out infinite; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__chevrons { display: none; position: absolute; top: 50%; left: 50%; width: 14px; height: 18px; transform: translate(-50%, -50%); } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__chevrons span { display: block; position: absolute; left: 2px; width: 10px; height: 10px; border-right: 2px solid var(--color-primary-100); border-bottom: 2px solid var(--color-primary-100); transform: rotate(45deg); animation: to-printer-modal-chevron 1.15s ease-in-out infinite; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__chevrons span:last-child { top: 8px; animation-delay: .18s; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__label--desktop { display: inline !important; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__label--mobile { display: none !important; } @media (max-width: 767.98px) { #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__clip { width: 36px; height: 36px; margin-left: -8px; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__mouse { display: none; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__chevrons { display: block; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__label--desktop { display: none !important; } #snackys-tpl .to-printer-selector-modal__body .to-clp-swipe__label--mobile { display: inline !important; } } #snackys-tpl .to-printer-selector-modal__option:hover, #snackys-tpl .to-printer-selector-modal__option:focus-visible { border-color: var(--color-primary-100); } @media (max-width: 767.98px) { #snackys-tpl .to-printer-selector-modal__dialog { width: 100%; max-height: calc(100vh - 32px); padding: var(--spacing-3); } #snackys-tpl .to-printer-selector-modal__list { grid-template-columns: 1fr; } #snackys-tpl .to-printer-selector-modal__list--series { grid-template-columns: repeat(2, minmax(0, 1fr)); } #snackys-tpl .to-printer-selector-modal__list--models { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #snackys-tpl .to-printer-selector__step-number { position: absolute; z-index: 1; top: 50%; left: 10px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; transform: translateY(-50%); border-radius: var(--border-radius-xs); background: var(--color-primary-100); color: var(--color-white); font-size: 13.3px; font-weight: var(--font-weight-bold); line-height: 1; pointer-events: none; } #snackys-tpl .to-printer-selector__field:has(select:disabled):not(:first-child) .to-printer-selector__step-number { background: var(--color-primary-50); } @media (max-width: 1199px) and (min-width: 768px) { #snackys-tpl .to-printer-selector--header .to-printer-selector__help { display: none; } } @media (max-width: 991px) { /**/ #snackys-tpl .to-header-clp .to-printer-selector__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } #snackys-tpl .to-header-clp .to-printer-selector__field { min-height: 35px; } #snackys-tpl .to-header-clp .to-printer-selector__dropdown summary { height: 35px; padding: 0 8px 0 34px; font-size: 13.3px; } #snackys-tpl .to-header-clp .to-printer-selector__step-number { left: 8px; width: 19px; height: 19px; font-size: 13.3px; } #snackys-tpl .to-header-clp .to-printer-selector__chevron { width: 18px; height: 18px; flex-basis: 18px; } } @media (max-width: 767px) { #snackys-tpl .to-printer-selector__heading-row { margin-bottom: var(--spacing-3); } #snackys-tpl .to-printer-selector__heading { font-size: 18px; } #snackys-tpl .to-printer-selector:not(.to-printer-selector--header) .to-printer-selector__steps { grid-template-columns: 1fr; gap: var(--spacing-2); } #snackys-tpl .to-printer-selector:not(.to-printer-selector--header) .to-printer-selector__field { min-height: 40px; } #snackys-tpl .to-printer-selector:not(.to-printer-selector--header) .to-printer-selector__dropdown summary { height: 40px; } }