.bask-root { width: 100%; max-width: 100%; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-family-body); container-type: inline-size; container-name: bask; } .bask-root, .bask-root *, .bask-root *::before, .bask-root *::after { box-sizing: border-box; } .bask-root main { overflow-x: clip; width: 100%; } .bask-root main:has(.bask-flow-wide), .bask-root main:has(.bask-flow-full) { overflow-x: visible; } .bask-root, .bask-root p, .bask-root h1, .bask-root h2, .bask-root h3 { overflow-wrap: anywhere; } section.bask-rsp { width: 100%; } .bask-root--authoring :is(input, textarea, select, button, [role="combobox"], [role="switch"], [role="slider"], [role="radio"], [role="checkbox"], .bask-select-trigger):not(.bask-carousel-arrow):not(.bask-carousel-dot) { pointer-events: none; } .bask-layout-chrome__hit { cursor: pointer; } .bask-layout-chrome::after { content: ""; position: absolute; inset: 0; z-index: 61; pointer-events: none; outline: 1px dashed transparent; outline-offset: -1px; transition: outline-color 120ms ease; } .bask-layout-chrome:hover::after { outline-color: rgba(110, 86, 207, 0.75); } .bask-layout-chrome[data-selected]::after { outline: 2px solid #6e56cf; outline-offset: -2px; } .bask-layout-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border: 1px solid rgba(110, 86, 207, 0.22); border-radius: 999px; box-sizing: border-box; background: rgba(255, 255, 255, 0.94); color: #5b47b8; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); font: 600 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; pointer-events: none; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .bask-layout-tag__name { font-weight: 500; opacity: 0.75; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .bask-layout-tag__name::before { content: "\00B7"; margin-right: 5px; } .bask-layout-tag__edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin: 0 -5px 0 1px; padding: 0; border: 0; border-radius: 999px; background: rgba(110, 86, 207, 0.12); color: inherit; cursor: pointer; } .bask-layout-tag__edit:hover { background: rgba(110, 86, 207, 0.22); } .bask-layout-tag__edit:focus-visible { outline: 2px solid #6e56cf; outline-offset: 1px; } .bask-layout-chrome:is(:hover, [data-selected]) .bask-layout-tag { background: #6e56cf; border-color: #6e56cf; color: #fff; } .bask-layout-chrome:is(:hover, [data-selected]) .bask-layout-tag__edit { background: rgba(255, 255, 255, 0.18); } .bask-layout-chrome:is(:hover, [data-selected]) .bask-layout-tag__edit:hover { background: rgba(255, 255, 255, 0.32); } .bask-layout-chrome:is(:hover, [data-selected]) .bask-layout-tag__edit:focus-visible { outline-color: #fff; } .bask-field-wrap, .bask-pay-field, .bask-coupon { text-align: start; } .bask-trust { text-align: start; } .bask-trust__zone { display: inline-flex; align-items: center; gap: inherit; min-width: 0; } .bask-field-wrap { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-field-label { display: inline-flex; align-items: center; column-gap: var(--spacing-100); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); color: hsl(var(--foreground)); } .bask-field-help { display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; flex: 0 0 auto; position: relative; border-radius: var(--radius-full, 9999px); background: hsl(var(--muted-foreground)); color: hsl(var(--background)); font-size: 0.8em; font-weight: var(--font-weight-medium); line-height: 1; cursor: help; } .bask-field-help::before { content: ""; position: absolute; inset: -0.6em; } .bask-field-help-popup { width: max-content; max-width: 16rem; padding: var(--spacing-100) var(--spacing-200); background: hsl(var(--foreground)); color: hsl(var(--background)); border-radius: var(--radius-base); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); letter-spacing: normal; font-weight: var(--font-weight-regular); box-shadow: var(--shadow-mid); z-index: 65; opacity: 1; transition: opacity 120ms ease; } .bask-field-help-popup[data-starting-style], .bask-field-help-popup[data-ending-style] { opacity: 0; } @media (prefers-reduced-motion: reduce) { .bask-field-help-popup { transition: none; } } .bask-field-desc, .bask-field-consent { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-field-tpl { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-100); min-width: 0; } .bask-field-tpl-zone { display: flex; flex-direction: column; gap: inherit; min-width: 0; } .bask-field--question > .bask-field-tpl { gap: calc(var(--spacing-100) * 2); } .bask-field--question:not([data-label="inline"]):not([data-label="floating"]) > .bask-field-label { order: -2; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); font-size: var(--font-size-heading-03); line-height: var(--line-height-heading-03); letter-spacing: var(--letter-spacing-heading-03); } .bask-field--question:not([data-label="inline"]):not([data-label="floating"]):not(:has(> .bask-choice-row)) > .bask-field-desc { order: -1; margin-bottom: calc(var(--spacing-600) - var(--spacing-100)); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: hsl(var(--foreground)); } .bask-field--question:not(fieldset):not([data-label="inline"]):not([data-label="floating"]):not(:has(> .bask-choice-row)) > .bask-field-desc { margin-top: var(--spacing-100); } .bask-field--question:not(fieldset):not([data-label="inline"]):not([data-label="floating"]):not(:has(> .bask-field-desc)) > .bask-field-label { margin-bottom: calc(var(--spacing-600) - var(--spacing-100)); } fieldset.bask-field--question:not(:has(> .bask-field-desc)) > .bask-field-label + * { margin-top: calc(var(--spacing-600) - var(--spacing-200)); } .bask-field { width: 100%; box-sizing: border-box; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: var(--field-text, hsl(var(--foreground))); background: var(--field-surface, hsl(var(--background))); border: var(--field-border-width, var(--stroke-xs)) solid var(--field-border, hsl(var(--input))); border-radius: var(--field-radius, var(--radius-lg)); padding: var(--bask-fs-py, var(--spacing-200)) var(--bask-fs-px, var(--spacing-300)); min-height: calc( 1em + var(--bask-fs-py, var(--spacing-200)) * 2 + var(--field-border-width, var(--stroke-xs)) * 2 ); min-height: calc( 1lh + var(--bask-fs-py, var(--spacing-200)) * 2 + var(--field-border-width, var(--stroke-xs)) * 2 ); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .bask-field::placeholder { color: var(--field-placeholder, hsl(var(--muted-foreground))); } [data-field-size="sm"] { --bask-fs-py: var(--spacing-100); --bask-fs-px: var(--spacing-200); --bask-fs-k: 0.875; --bask-slider-h: 1rem; --bask-slider-track: 0.25rem; --bask-slider-thumb: 0.875rem; } [data-field-size="md"] { --bask-fs-py: var(--spacing-200); --bask-fs-px: var(--spacing-300); --bask-fs-k: 1; --bask-slider-h: 1.25rem; --bask-slider-track: 0.4rem; --bask-slider-thumb: 1.1rem; } [data-field-size="lg"] { --bask-fs-py: var(--spacing-300); --bask-fs-px: var(--spacing-400); --bask-fs-k: 1.125; --bask-slider-h: 1.75rem; --bask-slider-track: 0.6rem; --bask-slider-thumb: 1.5rem; } [data-field-width="fit"] { align-items: flex-start; } [data-field-width="fit"][data-label="inline"] { align-items: center; } [data-field-width="fit"] .bask-field, [data-field-width="fit"] .bask-field-floatbox, [data-field-width="fit"] .bask-affix-row, [data-field-width="fit"] .bask-input-affix, [data-field-width="fit"] .bask-phone-row, [data-field-width="fit"] .bask-combo-single { width: auto; max-width: 100%; } [data-field-width="fit"] .bask-field:not(.bask-phone-prefix):not(.bask-phone-country) { min-width: calc(var(--spacing-300) * 10); field-sizing: content; } [data-field-width="fit"][data-label="inline"] > .bask-field, [data-field-width="fit"][data-label="inline"] > .bask-field-floatbox, [data-field-width="fit"][data-label="inline"] > .bask-affix-row, [data-field-width="fit"][data-label="inline"] > .bask-input-affix, [data-field-width="fit"][data-label="inline"] > .bask-phone-row, [data-field-width="fit"][data-label="inline"] > .bask-combo-single { flex: 0 1 auto; } .bask-field:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-field:focus-visible { border-color: var(--focus-ring, hsl(var(--ring))); box-shadow: inset 0 0 0 var(--focus-width, var(--stroke-sm)) var(--focus-ring, hsl(var(--ring))); } .bask-field[aria-invalid="true"], .bask-field[data-bask-invalid] { border-color: hsl(var(--destructive)); box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--destructive)); } .bask-field--filled[aria-invalid="true"], .bask-field--underline[aria-invalid="true"], .bask-field--filled[data-bask-invalid], .bask-field--underline[data-bask-invalid] { border-color: transparent; border-bottom-color: hsl(var(--destructive)); box-shadow: none; } [data-bask-invalid] .bask-checkbox, [data-bask-invalid] .bask-native-radio, [data-bask-invalid] .bask-check, [data-bask-invalid] .bask-choice-tile, [data-bask-invalid] .bask-checkbox-card, [data-bask-invalid] .bask-checkbox-btn, [data-bask-invalid] .bask-toggle { border-color: hsl(var(--destructive)); } [data-bask-invalid] .bask-switch { box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--destructive)); } .bask-field--filled { background: hsl(var(--muted)); border: var(--field-border-width, var(--stroke-xs)) solid transparent; border-bottom-color: var(--field-border, hsl(var(--input))); border-radius: var(--field-radius, var(--radius-lg)) var(--field-radius, var(--radius-lg)) 0 0; } .bask-field--filled:hover { border-bottom-color: var(--focus-ring, hsl(var(--ring))); } .bask-field--filled:focus-visible { box-shadow: none; border-color: transparent; border-bottom-color: var(--focus-ring, hsl(var(--ring))); } .bask-field--underline { background: transparent; border: none; border-bottom: var(--field-border-width, var(--stroke-xs)) solid var(--field-border, hsl(var(--input))); border-radius: 0; padding-left: 0; padding-right: 0; } .bask-field--underline:hover { border-bottom-color: var(--focus-ring, hsl(var(--ring))); } .bask-field--underline:focus-visible { box-shadow: none; border-bottom-color: var(--focus-ring, hsl(var(--ring))); } .bask-field-wrap[data-label="inline"] { flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: var(--spacing-200); } .bask-field-wrap[data-label="inline"]:has(.bask-calendar) { align-items: flex-start; } .bask-field-wrap[data-label="inline"] > .bask-field-label { flex: 0 0 var(--bask-label-w, 8rem); overflow-wrap: anywhere; } .bask-field-wrap[data-label="inline"] > .bask-field, .bask-field-wrap[data-label="inline"] > .bask-field-floatbox, .bask-field-wrap[data-label="inline"] > .bask-input-affix, .bask-field-wrap[data-label="inline"] > .bask-affix-row, .bask-field-wrap[data-label="inline"] > .bask-date-field, .bask-field-wrap[data-label="inline"] > .bask-date-dropdowns, .bask-field-wrap[data-label="inline"] > .bask-phone-row, .bask-field-wrap[data-label="inline"] > .bask-calendar, .bask-field-wrap[data-label="inline"] > .bask-file, .bask-field-wrap[data-label="inline"] > .bask-number-row, .bask-field-wrap[data-label="inline"] > .bask-height-row { flex: 1 1 12rem; min-width: 0; } .bask-field-wrap[data-label="inline"] > .bask-field-desc, .bask-field-wrap[data-label="inline"] > .bask-field-count, .bask-field-wrap[data-label="inline"] > .bask-field-error, .bask-field-wrap[data-label="inline"] > .bask-idv-foot { flex-basis: 100%; } .bask-field-floatbox { position: relative; display: flex; width: 100%; } .bask-field-floatbox > .bask-field { width: 100%; } .bask-field-floatlabel { position: absolute; left: var(--bask-fs-px, var(--spacing-300)); top: 50%; transform: translateY(-50%); transform-origin: left center; max-width: calc(100% - var(--spacing-500)); padding: 0 var(--spacing-50); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: transparent; color: hsl(var(--muted-foreground)); z-index: 1; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: 1; pointer-events: none; transition: transform 120ms ease, color 120ms ease, top 120ms ease; } .bask-field-floatbox:focus-within > .bask-field-floatlabel, .bask-field-floatbox[data-shrink="true"] > .bask-field-floatlabel, .bask-field-floatbox > input.bask-field:not(:placeholder-shown) ~ .bask-field-floatlabel { top: 0; transform: translateY(-50%) scale(0.82); background: hsl(var(--background)); } .bask-field-floatbox:focus-within > .bask-field-floatlabel { color: hsl(var(--ring)); } .bask-field-floatbox:has(.bask-date-calendar-btn[data-popup-open]) > .bask-field-floatlabel, .bask-field-floatbox > .bask-select-trigger[data-popup-open] ~ .bask-field-floatlabel { top: 0; transform: translateY(-50%) scale(0.82); background: hsl(var(--background)); color: hsl(var(--ring)); } .bask-field-floatbox:has([aria-expanded="true"]) > .bask-field-floatlabel, .bask-field-floatbox:has(input.bask-field:not(:placeholder-shown)) > .bask-field-floatlabel, .bask-field-floatbox:has(.bask-date-segment:not(:placeholder-shown)) > .bask-field-floatlabel, .bask-field-floatbox:has(.bask-combo-chip-field:not(:placeholder-shown)) > .bask-field-floatlabel { top: 0; transform: translateY(-50%) scale(0.82); background: hsl(var(--background)); } .bask-field-floatbox > textarea.bask-field ~ .bask-field-floatlabel { top: var(--bask-fs-py, var(--spacing-200)); transform: none; } .bask-field-floatbox > textarea.bask-field:focus ~ .bask-field-floatlabel, .bask-field-floatbox > textarea.bask-field:not(:placeholder-shown) ~ .bask-field-floatlabel { top: 0; transform: translateY(-50%) scale(0.82); background: hsl(var(--background)); } @media (prefers-reduced-motion: reduce) { .bask-field-floatlabel { transition: none; } } .bask-field-count { align-self: flex-end; font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-affix-row { display: flex; gap: var(--spacing-100); align-items: stretch; width: 100%; } .bask-affix-row > .bask-field { flex: 1 1 auto; min-width: 0; } .bask-field-affix { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 var(--bask-fs-px, var(--spacing-300)); background: hsl(var(--muted)); border: var(--field-border-width, var(--stroke-xs)) solid var(--field-border, hsl(var(--input))); border-radius: var(--field-radius, var(--radius-lg)); color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); white-space: nowrap; } .bask-input-affix { position: relative; display: flex; align-items: center; width: 100%; } .bask-input-affix > .bask-field { padding-right: calc(var(--spacing-700) * var(--bask-fs-k, 1)); } .bask-field-reveal { all: unset; box-sizing: border-box; position: absolute; top: 50%; right: var(--spacing-100); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; cursor: pointer; color: hsl(var(--muted-foreground)); border-radius: var(--radius-base); transition: color 120ms ease; } .bask-field-reveal:hover { color: hsl(var(--foreground)); } .bask-field-reveal:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bask-field-reveal { transition: none; } } .bask-choice-row { display: inline-flex; align-items: center; gap: var(--spacing-100); cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: hsl(var(--foreground)); } .bask-choice-row--justify { display: flex; width: 100%; justify-content: space-between; } .bask-choice-row--top { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); } .bask-switch-end { display: inline-flex; align-items: center; gap: var(--spacing-100); flex: 0 0 auto; } .bask-switch-state { font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); min-width: 2ch; text-align: right; } .bask-check { all: unset; box-sizing: border-box; width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--indicator-surface, hsl(var(--background))); border: var(--stroke-sm) solid var(--field-border, hsl(var(--input))); border-radius: var(--radius-sm); color: var(--indicator-mark, hsl(var(--primary-foreground))); transition: background 120ms ease, border-color 120ms ease; } .bask-radio { border-radius: var(--radius-full); } .bask-check:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-check:focus-visible { box-shadow: 0 0 0 var(--stroke-xs) var(--focus-ring, hsl(var(--ring))); } .bask-check[data-state="checked"], .bask-check[data-state="on"] { background: var(--indicator-checked, hsl(var(--primary))); border-color: var(--indicator-checked, hsl(var(--primary))); } .bask-check-indicator { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .bask-radio-dot { width: 0.5em; height: 0.5em; border-radius: var(--radius-full); background: var(--indicator-mark, hsl(var(--primary-foreground))); } .bask-checkbox, .bask-native-radio { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: 0 0 auto; width: 1.15em; height: 1.15em; margin: 0; background: var(--indicator-surface, hsl(var(--background))); border: var(--stroke-sm) solid var(--field-border, hsl(var(--input))); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .bask-native-radio { border-radius: 50%; } .bask-checkbox:hover, .bask-native-radio:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-checkbox:focus-visible, .bask-native-radio:focus-visible { box-shadow: 0 0 0 var(--stroke-xs) var(--focus-ring, hsl(var(--ring))); } .bask-checkbox:checked { background-color: var(--indicator-checked, hsl(var(--primary))); border-color: var(--indicator-checked, hsl(var(--primary))); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.4 8.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.72em; } .bask-native-radio:checked { border-color: var(--indicator-checked, hsl(var(--primary))); background-image: radial-gradient(circle at center, var(--indicator-checked, hsl(var(--primary))) 0 0.28em, transparent 0.3em); } .bask-field:disabled, .bask-checkbox:disabled, .bask-native-radio:disabled { opacity: 0.55; cursor: not-allowed; } .bask-choice-group { display: grid; grid-template-columns: repeat(var(--bask-choice-cols, 1), minmax(0, 1fr)); gap: var(--spacing-100); } @container bask (max-width: 639px) { .bask-choice-group { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .bask-choice-group--row { display: flex; flex-wrap: wrap; } .bask-choice-group--row .bask-choice-tile { flex: 1 1 auto; } .bask-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bask-rv2-options { display: grid; grid-template-columns: repeat(var(--rv2-cols, 1), minmax(0, 1fr)); } @container bask (max-width: 639px) { .bask-rv2-options:not(.bask-rv2-options--row) { grid-template-columns: minmax(0, 1fr); } } .bask-rv2-options--row { display: flex; flex-wrap: wrap; } .bask-rv2-options--row > .bask-rv2-opt { flex: 0 1 auto; } .bask-rv2-options--row.bask-rv2-options--fill > .bask-rv2-opt { flex: 1 1 auto; } .bask-rv2-options--equal > .bask-rv2-opt { flex: 1 1 0; } .bask-rv2-options--segmented { flex-wrap: nowrap; gap: 0; padding: var(--spacing-25); background: hsl(var(--muted)); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: min(var(--radius-lg), 1rem); } .bask-rv2-options--segmented > .bask-rv2-opt { flex: 1 1 0; } .bask-rv2-options--segmented .bask-choice-frame { border-radius: calc(min(var(--cf-radius), 1rem) - var(--spacing-25)); } @container bask (max-width: 639px) { .bask-rv2-options--keep-cols:not(.bask-rv2-options--row) { grid-template-columns: repeat(var(--rv2-cols, 1), minmax(0, 1fr)); } } .bask-rv2-options[data-option-style="pills"] .bask-choice-frame { border-radius: var(--cf-radius); } .bask-feature-list .bask-choice-icon { margin-top: 0.15em; } .bask-signed-in-body { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; } .bask-rv2-header { display: flex; flex-direction: column; gap: var(--spacing-200); min-width: 0; } .bask-rv2-plain-label { font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); } .bask-rv2-plain-description { color: hsl(var(--muted-foreground)); } .bask-rv2-plain-option { display: flex; flex-direction: column; gap: var(--spacing-100); flex: 1 1 auto; min-width: 0; padding: var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--option-radius, var(--radius-lg)); } .bask-rv2-opt:hover > .bask-rv2-plain-option { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-rv2-opt[data-checked] > .bask-rv2-plain-option { border-color: var(--option-selected-border, hsl(var(--primary))); box-shadow: inset 0 0 0 var(--stroke-xs) var(--option-selected-border, hsl(var(--primary))); } .bask-rv2-opt:has(input:focus-visible) > .bask-rv2-plain-option { outline: var(--stroke-sm) solid var(--focus-ring, hsl(var(--ring))); outline-offset: 2px; } .bask-rv2-parent { display: flex; flex-direction: column; min-width: 0; } .bask-rv2-options--row > .bask-rv2-parent { flex: 1 1 100%; } .bask-rv2-parent[data-active] > .bask-rv2-opt .bask-choice-frame { border-color: transparent; border-radius: 0; box-shadow: none; } .bask-rv2-options:is([data-option-style="radio"], [data-option-style="checkbox"]) > .bask-rv2-parent[data-active] > .bask-rv2-opt { padding: var(--spacing-300); } .bask-rv2-opt { display: flex; position: relative; cursor: pointer; } .bask-rv2-opt > .bask-choice-frame { flex: 1 1 auto; } .bask-rv2-opt > [data-brick-id] { flex: 1 1 auto; display: flex; min-width: 0; } .bask-rv2-opt > [data-brick-id] > .bask-choice-frame { flex: 1 1 auto; } .bask-choice-frame { box-sizing: border-box; min-width: 0; background: var(--cf-bg); color: var(--cf-fg, inherit); border: var(--cf-bw) solid var(--cf-border); border-radius: min(var(--cf-radius), 1rem); box-shadow: var(--cf-shadow, none); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); overflow-wrap: break-word; word-break: normal; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease; } .bask-rv2-options[data-built]:is([data-multiple], [data-option-style="pills"], [data-option-style="segmented"], [data-option-style="tiles"]) .bask-choice-frame .bask-type { letter-spacing: inherit; } .bask-choice-frame :is(p, h2, h3, h4, h5, h6) { overflow-wrap: break-word; word-break: normal; max-width: 100%; } .bask-choice-frame .bask-flex { max-width: 100%; } .bask-rv2-opt:hover .bask-choice-frame { border-color: var(--cf-hover, var(--cf-border)); } .bask-rv2-opt[data-checked] .bask-choice-frame { background: var(--cf-sel-bg, var(--cf-bg)); color: var(--cf-sel-fg, var(--cf-fg, inherit)); border-color: var(--cf-sel-border, var(--cf-border)); box-shadow: inset 0 0 0 var(--cf-bw) var(--cf-sel-border, transparent), var(--cf-sel-shadow, 0 0 #0000); } .bask-rv2-opt:has(input:focus-visible) .bask-choice-frame { outline: var(--stroke-sm) solid var(--focus-ring, hsl(var(--ring))); outline-offset: 2px; } .bask-rv2[data-bask-invalid] .bask-choice-frame, .bask-rv2[data-bask-invalid] .bask-radio-ind:not([data-checked-style="mark"]) { border-color: hsl(var(--destructive)); } @media (prefers-reduced-motion: reduce) { .bask-choice-frame, .bask-radio-ind, .bask-radio-ind-mark { transition: none; } } .bask-radio-ind { flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--ri-size); height: var(--ri-size); background: var(--ri-bg, var(--indicator-surface, hsl(var(--background)))); border: var(--ri-bw, var(--stroke-sm)) solid var(--ri-border, var(--field-border, hsl(var(--input)))); border-radius: var(--radius-full); transition: background 120ms ease, border-color 120ms ease; } .bask-radio-ind[data-shape="square"] { border-radius: min(var(--radius-sm), 0.25rem); } .bask-radio-ind-mark > svg { flex: 0 0 auto; width: calc(var(--ri-size) * 0.62); height: auto; } .bask-radio-ind-mark { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ri-mark, var(--indicator-mark, hsl(var(--primary-foreground)))); opacity: 0; transform: scale(0.5); transition: opacity 120ms ease, transform 120ms ease; } .bask-radio-ind[data-mark="dot"] .bask-radio-ind-mark { width: 40%; height: 40%; border-radius: var(--radius-full); background: var(--ri-mark, var(--indicator-mark, hsl(var(--primary-foreground)))); } .bask-rv2-opt[data-checked] .bask-radio-ind { background: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); border-color: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-rv2-opt[data-checked] .bask-radio-ind-mark { opacity: 1; transform: none; } .bask-rv2-opt:not([data-checked]):hover .bask-radio-ind[data-checked-style="filled"] { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-rv2-opt:hover .bask-radio-ind[data-checked-style="ring"] { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-rv2-opt[data-checked] .bask-radio-ind[data-checked-style="ring"] { background: var(--ri-bg, var(--indicator-surface, hsl(var(--background)))); border-color: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-radio-ind[data-checked-style="ring"][data-mark="dot"] .bask-radio-ind-mark { width: 0.56em; height: 0.56em; background: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-radio-ind[data-checked-style="ring"][data-mark="check"] .bask-radio-ind-mark { color: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-radio-ind[data-checked-style="mark"], .bask-rv2-opt[data-checked] .bask-radio-ind[data-checked-style="mark"] { background: transparent; border-color: transparent; } .bask-radio-ind[data-checked-style="mark"][data-mark="check"] .bask-radio-ind-mark { color: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-radio-ind[data-checked-style="mark"] .bask-radio-ind-mark > svg { width: calc(var(--ri-size) * 0.87); } .bask-radio-ind[data-checked-style="mark"][data-mark="dot"] .bask-radio-ind-mark { background: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-choice-img[data-layout="banner"] { width: 100%; height: 5rem; } .bask-choice-img[data-layout="product"] { width: 3.25em; height: 3.25em; object-fit: contain; border-radius: min(var(--radius-lg), 0.75rem); background: hsl(var(--muted)); } .bask-choice-tile { display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-300); min-height: 3.5rem; background: var(--bask-tile-surface, var(--option-surface, hsl(var(--background)))); border: var(--field-border-width, var(--stroke-xs)) solid var(--option-border, hsl(var(--input))); border-radius: min(var(--option-radius, var(--radius-lg)), 1rem); cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: var(--bask-tile-text, hsl(var(--foreground))); transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; } .bask-choice-tile:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-choice-tile:has(input:checked) { --bask-tile-surface: var(--option-selected-surface, hsl(var(--background))); --bask-tile-text: var(--option-selected-text, hsl(var(--foreground))); border-color: var(--option-selected-border, hsl(var(--primary))); box-shadow: inset 0 0 0 var(--field-border-width, var(--stroke-xs)) var(--option-selected-border, hsl(var(--primary))); } .bask-choice-tile:has(input:focus-visible) { box-shadow: inset 0 0 0 var(--focus-width, var(--stroke-sm)) var(--focus-ring, hsl(var(--ring))); } .bask-choice-body { display: flex; flex-direction: column; gap: var(--spacing-25); flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; } .bask-choice-desc { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-choice-img-pair { display: contents; } .bask-choice-img { width: 2.5rem; height: 2.5rem; border-radius: min(var(--radius-base), 0.5rem); object-fit: cover; flex: 0 0 auto; } .bask-choice-icon { display: inline-flex; align-items: center; flex: 0 0 auto; color: currentColor; } .bask-choice-icon svg { width: var(--bci-size, 1.15em); height: var(--bci-size, 1.15em); } .bask-choice-tile:has(> input[type="checkbox"]) > input { order: 1; margin-left: auto; } .bask-cbg { width: 100%; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card, var(--background))); overflow: hidden; } .bask-cbg-header { display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-300); font-family: var(--font-family-body); cursor: pointer; list-style: none; user-select: none; } .bask-cbg-header::-webkit-details-marker { display: none; } .bask-prod-acc-summary::-webkit-details-marker { display: none; } .bask-cbg-header > .bask-rv2-header { flex: 1 1 auto; gap: var(--spacing-50); } .bask-cbg[open] > .bask-cbg-header { border-bottom: var(--stroke-xs) solid hsl(var(--border)); } .bask-cbg > .bask-field-desc { padding: var(--spacing-100) var(--spacing-300) 0; } .bask-cbg > .bask-rv2-options { padding: var(--spacing-200) var(--spacing-300) var(--spacing-300); } .bask-cbg-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 1.375rem; height: 1.375rem; padding: 0 0.35rem; border-radius: var(--radius-full, 9999px); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 0.75rem; font-weight: 600; line-height: 1; } .bask-cbg-chevron { display: inline-flex; flex: 0 0 auto; width: 0.7em; color: hsl(var(--muted-foreground)); transition: transform 120ms ease; } .bask-cbg-chevron svg { width: 100%; height: auto; } .bask-cbg[open] > .bask-cbg-header .bask-cbg-chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .bask-cbg-chevron { transition: none; } } .bask-choice-scale { display: flex; justify-content: space-between; font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); }@media (prefers-reduced-motion: reduce) { .bask-choice-tile { transition: none; } } .bask-choice-parent { grid-column: 1 / -1; } .bask-choice-parent[data-active] { border: var(--field-border-width, var(--stroke-xs)) solid var(--option-selected-border, hsl(var(--primary))); border-radius: min(var(--option-radius, var(--radius-lg)), 1rem); overflow: hidden; } .bask-choice-parent[data-active] .bask-choice-tile, .bask-choice-parent[data-active] .bask-toggle { border-color: transparent; border-radius: 0; box-shadow: none; } .bask-choice-parent[data-active] > label > .bask-native-radio { border-color: hsl(var(--primary)); background-image: radial-gradient(circle at center, hsl(var(--primary)) 0 0.28em, transparent 0.3em); } .bask-choice-subtray { display: flex; flex-direction: column; gap: var(--spacing-200); padding: var(--spacing-300); background: hsl(var(--muted)); border-top: var(--stroke-xs) solid hsl(var(--border)); } .bask-choice-prompt { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-choice-reveal { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); white-space: pre-line; } .bask-choice-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--spacing-100); } .bask-choice-seg { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--spacing-100) var(--spacing-200); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: min(var(--radius-lg), 0.75rem); background: hsl(var(--background)); cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); color: hsl(var(--foreground)); text-align: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .bask-choice-seg:hover { border-color: hsl(var(--ring)); } .bask-choice-seg:has(input:checked), .bask-choice-seg[data-selected="true"] { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .bask-choice-seg:has(input:focus-visible) { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } @media (prefers-reduced-motion: reduce) { .bask-choice-seg { transition: none; } } .bask-picker-skel { display: grid; gap: var(--spacing-200); } .bask-picker-skel > span { display: block; height: 5em; border-radius: var(--radius-lg); background: hsl(var(--muted)); animation-duration: 1.6s; } .bask-picker-skel > span:first-child { height: 16em; } .bask-product-picker > .bask-field-label { float: left; width: 100%; margin-bottom: var(--spacing-50); } .bask-product-picker > .bask-field-label + * { clear: left; } .bask-product-picker > .bask-field-label + .bask-product-group { margin-top: var(--spacing-50); } .bask-product-picker > .bask-field-desc { display: block; margin-bottom: var(--spacing-100); } .bask-product-picker > .bask-field-error { display: block; margin-top: var(--spacing-100); } .bask-product-group > .bask-choice-parent { grid-column: auto; } .bask-product-group > * { display: flex; flex-direction: column; } .bask-product-group .bask-choice-tile { flex: 1; } .bask-product-group .bask-choice-tile:has(input:checked)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--primary)); pointer-events: none; } .bask-choice-parent[data-active] .bask-choice-tile::after { display: none; } .bask-product-group .bask-choice-tile { position: relative; box-shadow: var(--shadow-low); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .bask-product-group .bask-choice-tile:hover { transform: translateY(-2px); border-color: hsl(var(--primary)); box-shadow: var(--shadow-mid); } .bask-product-group .bask-choice-tile:has(input:checked) { border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--primary)), var(--shadow-mid); } .bask-product-group .bask-choice-tile::before { content: ""; position: absolute; top: var(--spacing-100); right: var(--spacing-100); width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full, 9999px); background-color: hsl(var(--primary)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.4 8.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.7rem; box-shadow: 0 0 0 var(--stroke-sm) hsl(var(--background)); opacity: 0; transform: scale(0.5); transition: opacity 140ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 2; } .bask-product-group .bask-choice-tile:has(input:checked)::before { opacity: 1; transform: scale(1); } .bask-product-group--canvas .bask-choice-tile::before { opacity: 1; transform: scale(1); background-color: hsl(var(--background)); background-image: none; box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--border)); } .bask-product-group--canvas .bask-choice-tile:has(input:checked)::before { background-color: hsl(var(--primary)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.4 8.5 11 1.5'/%3E%3C/svg%3E"); box-shadow: 0 0 0 var(--stroke-sm) hsl(var(--background)); } .bask-product-group--canvas .bask-choice-tile:has(> input[type="checkbox"])::before { border-radius: var(--radius-sm); } .bask-product-group--canvas.bask-product-group--pinned .bask-choice-tile::before { display: none; } .bask-product-group .bask-choice-tile:has(.bask-product-select:not(.bask-hide-sm, .bask-hide-md, .bask-hide-lg, .bask-hide-sm *, .bask-hide-md *, .bask-hide-lg *))::before { display: none; } .bask-product-group--canvas [data-bask-plans-hidden] .bask-plan-cards { opacity: 0.4; } @media (prefers-reduced-motion: reduce) { .bask-product-group .bask-choice-tile, .bask-product-group .bask-choice-tile::before { transition: none; } .bask-product-group .bask-choice-tile:hover { transform: none; } } .bask-product-group .bask-choice-subtray { animation: bask-product-tray-in 180ms ease both; } @keyframes bask-product-tray-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .bask-product-group .bask-choice-subtray { animation: none; } } .bask-product-group .bask-choice-tile { flex-direction: column; align-items: stretch; gap: var(--spacing-100); overflow: hidden; position: relative; } .bask-product-group .bask-choice-body > * { width: 100%; } .bask-product-group .bask-choice-tile:not(:has(.bask-product-select:not(.bask-hide-sm, .bask-hide-md, .bask-hide-lg, .bask-hide-sm *, .bask-hide-md *, .bask-hide-lg *))) .bask-choice-body > *:first-child:not(:has(.bask-plan-cards)), .bask-product-group .bask-choice-tile:not(:has(.bask-product-select:not(.bask-hide-sm, .bask-hide-md, .bask-hide-lg, .bask-hide-sm *, .bask-hide-md *, .bask-hide-lg *))) .bask-choice-body > *:first-child:has(.bask-plan-cards) > *:first-child:not(.bask-plan-cards) { padding-right: 1.5rem; align-items: flex-start; } .bask-product-group .bask-choice-tile:not(:has(.bask-product-select:not(.bask-hide-sm, .bask-hide-md, .bask-hide-lg, .bask-hide-sm *, .bask-hide-md *, .bask-hide-lg *))) .bask-choice-body .bask-select-trigger { padding-right: 1.5rem; } .bask-product-group .bask-choice-body .bask-flex--col .bask-flex--row { flex-wrap: wrap; } .bask-product-segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--spacing-100); } .bask-product-seg { flex-direction: column; align-items: center; gap: var(--spacing-50); padding: var(--spacing-200) var(--spacing-200); position: relative; } .bask-product-seg-main { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-25); } .bask-product-seg-name { font-weight: var(--font-weight-medium); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); } .bask-product-seg-price { font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); font-weight: var(--font-weight-bold); } .bask-product-seg-unit { margin-left: 1px; font-size: var(--font-size-body-03); font-weight: var(--font-weight-regular); color: hsl(var(--muted-foreground)); } .bask-product-seg-badge { font-size: var(--font-size-body-03); line-height: 1; font-weight: var(--font-weight-medium); padding: 0.2em 0.55em; border-radius: var(--radius-full, 9999px); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); white-space: nowrap; } .bask-product-seg-badge--save { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); } .bask-product-seg[data-best="true"] { border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--primary)); } .bask-product-seg[data-best="true"] .bask-product-seg-badge { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .bask-product-seg:has(input:checked) .bask-product-seg-unit { color: inherit; opacity: 0.75; } .bask-product-seg:has(input:checked) .bask-product-seg-badge { background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); } .bask-qty { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); } .bask-qty-label { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-qty-ctrl { display: inline-flex; align-items: stretch; border: var(--stroke-xs) solid hsl(var(--input)); border-radius: min(var(--radius-lg), 0.75rem); background: hsl(var(--background)); overflow: hidden; } .bask-qty-btn { width: 2.5rem; min-height: 2.5rem; display: grid; place-items: center; border: 0; background: none; cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-body-01); color: hsl(var(--foreground)); transition: background 120ms ease; } .bask-qty-btn:hover { background: hsl(var(--muted)); } .bask-qty-btn:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); outline: none; } .bask-qty-input { width: 3rem; border: 0; border-inline: var(--stroke-xs) solid hsl(var(--input)); background: none; text-align: center; font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); color: hsl(var(--foreground)); } .bask-qty-input:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); outline: none; } span.bask-qty-input { display: grid; place-items: center; } @media (prefers-reduced-motion: reduce) { .bask-qty-btn { transition: none; } } .bask-choice-parent[data-invalid] { border: var(--stroke-xs) solid hsl(var(--destructive)); border-radius: min(var(--radius-lg), 1rem); overflow: hidden; } .bask-choice-parent[data-invalid] .bask-qty-ctrl, .bask-choice-parent[data-invalid] .bask-qty-input { border-color: hsl(var(--destructive)); } .bask-choice-seg:has(input:checked) .bask-product-seg-price { color: inherit; opacity: 0.8; } .bask-product-group--pinned .bask-choice-tile { cursor: default; } .bask-product-group--pinned .bask-choice-tile:hover { transform: none; border-color: hsl(var(--input)); box-shadow: var(--shadow-low); } .bask-choice-tile[aria-disabled="true"] { cursor: not-allowed; } .bask-choice-tile[aria-disabled="true"]:hover { transform: none; border-color: hsl(var(--input)); box-shadow: var(--shadow-low); } .bask-choice-tile[aria-disabled="true"] .bask-choice-body { opacity: 0.5; } .bask-choice-reason { display: block; margin-top: var(--spacing-100); font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .bask-plan-segs .bask-choice-seg:has(input:checked) { background: var(--bask-plan-active, hsl(var(--primary))); border-color: var(--bask-plan-active, hsl(var(--primary))); color: var(--bask-plan-active-fg, hsl(var(--primary-foreground))); } .bask-plan-segs .bask-product-seg[data-best="true"] { border-color: var(--bask-plan-active, hsl(var(--primary))); box-shadow: inset 0 0 0 var(--stroke-xs) var(--bask-plan-active, hsl(var(--primary))); } .bask-plan-segs .bask-product-seg[data-best="true"] .bask-product-seg-badge { background: var(--bask-plan-active, hsl(var(--primary))); color: var(--bask-plan-active-fg, hsl(var(--primary-foreground))); } .bask-plan-segs .bask-product-seg:has(input:checked) .bask-product-seg-badge { background: var(--bask-plan-active-fg, hsl(var(--primary-foreground))); color: var(--bask-plan-active, hsl(var(--primary))); } .bask-plan-card { position: relative; display: block; width: 100%; padding: var(--bask-plan-pad, var(--spacing-300)); border-style: solid; border-width: var(--stroke-xs); border-radius: var(--radius-lg); border-color: var(--bask-plan-border, hsl(var(--border))); background: var(--bask-plan-bg, hsl(var(--card))); color: var(--bask-plan-fg, hsl(var(--foreground))); font-family: var(--font-family-body); text-align: left; } button.bask-plan-card { cursor: pointer; } .bask-plan-card, .bask-plan-card p, .bask-product-group .bask-choice-body, .bask-product-group .bask-choice-body p, .bask-addon, .bask-addon p { overflow-wrap: break-word; word-break: normal; } .bask-plan-card .bask-flex--row { flex-wrap: wrap; } .bask-choice-body .bask-flex, .bask-plan-card .bask-flex, .bask-osum-row .bask-flex { min-width: 0; max-width: 100%; } .bask-plan-card > .bask-flex--row > :last-child, .bask-plan-card > *:not(.bask-flex) > .bask-flex--row > :last-child { margin-left: auto; } .bask-product-group .bask-plan-cards { margin-top: var(--spacing-300); } .bask-plan-card[data-selected] { border-color: var(--bask-plan-border-selected, hsl(var(--primary))); background: var(--bask-plan-bg-selected, hsl(var(--accent))); box-shadow: inset 0 0 0 var(--stroke-sm) var(--bask-plan-border-selected, hsl(var(--primary))); } .bask-plan-card[data-lift] { box-shadow: var(--shadow-low); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease; } .bask-plan-card[data-lift]:hover { transform: translateY(-2px); border-color: var(--bask-plan-border-selected, hsl(var(--primary))); background: var(--bask-plan-bg-selected, hsl(var(--accent))); box-shadow: var(--shadow-mid); } .bask-plan-card[data-lift][data-selected] { box-shadow: inset 0 0 0 var(--stroke-sm) var(--bask-plan-border-selected, hsl(var(--primary))), var(--shadow-mid); } @media (prefers-reduced-motion: reduce) { .bask-plan-card[data-lift] { transition: none; } .bask-plan-card[data-lift]:hover { transform: none; } } .bask-plan-check { position: absolute; top: var(--spacing-200); right: var(--spacing-200); display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: var(--radius-full); background: var(--bask-plan-check-bg, hsl(var(--primary))); color: var(--bask-plan-check-fg, hsl(var(--primary-foreground))); font-size: 0.625rem; line-height: 1; } .bask-plan-details-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease), visibility 0s linear var(--motion-duration-normal, 300ms); } .bask-plan-details-panel[data-open="true"] { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-plan-details-clip { overflow: hidden; min-height: 0; } @media (prefers-reduced-motion: reduce) { .bask-plan-details-panel, .bask-plan-details-panel[data-open="true"] { transition: none; } } .bask-plan-details { display: flex; flex-direction: column; gap: var(--bask-plan-details-gap, var(--spacing-100)); margin-top: var(--spacing-200); color: var(--bask-plan-details-fg, hsl(var(--muted-foreground))); font-size: var(--bask-plan-details-size, inherit); line-height: var(--bask-plan-details-lh, inherit); letter-spacing: var(--bask-plan-details-ls, normal); } .bask-plan-details[data-divider] { padding-top: var(--spacing-200); border-top: var(--stroke-xs) solid var(--bask-plan-border, hsl(var(--border))); } .bask-plan-details-title { color: var(--bask-plan-details-title-fg, hsl(var(--muted-foreground))); } .bask-plan-details-list { display: flex; flex-direction: column; gap: var(--bask-plan-details-gap, var(--spacing-100)); margin: 0; padding: 0 0 0 var(--spacing-500); list-style: disc outside; } .bask-cadence-trigger { appearance: none; -webkit-appearance: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3em; margin: 0.35em 0 0; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); color: hsl(var(--muted-foreground)); text-align: start; } .bask-cadence-trigger:hover .bask-cadence-trigger__terms { text-decoration: underline; } .bask-cadence-trigger__chev { display: inline-flex; color: hsl(var(--primary)); transition: transform 150ms ease; } .bask-cadence-trigger[aria-expanded="true"] .bask-cadence-trigger__chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .bask-cadence-trigger__chev { transition: none; } } .bask-cadence-plans { display: flex; flex-direction: column; gap: var(--spacing-200); width: 100%; flex: 0 0 100%; order: 1; } .bask-cadence-plan { --bask-plan-pad: 0.6em 0.75em; } .bask-cadence-plan__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-200); } .bask-cadence-plan__main { display: flex; flex-direction: column; gap: 0.1em; min-width: min-content; } .bask-cadence-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; padding-right: 1.25em; } .bask-cadence-plan__name { font-weight: var(--font-weight-medium); } .bask-cadence-plan__badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 0.1em 0.5em; border-radius: var(--radius-full); background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); font-weight: var(--font-weight-medium); font-size: 0.8em; white-space: nowrap; } .bask-cadence-plan__badge--save { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .bask-cadence-plan__note { color: hsl(var(--muted-foreground)); font-size: 0.85em; } .bask-cadence-plan__price { display: flex; align-items: baseline; gap: 0.4em; flex: 0 0 auto; margin-left: auto; } .bask-cadence-plan__was { color: hsl(var(--muted-foreground)); font-size: 0.85em; font-variant-numeric: tabular-nums; } .bask-cadence-plan__amount { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } .bask-cadence-plan__unit { color: hsl(var(--muted-foreground)); font-size: 0.85em; } .bask-cadence-plan__note--accent { color: hsl(var(--primary)); } .bask-cadence-plan:disabled { cursor: default; opacity: 0.65; } .bask-pay { width: 100%; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-pay-stack { display: flex; flex-direction: column; gap: var(--spacing-200); } .bask-pay-leg { display: flex; flex-direction: column; gap: var(--spacing-200); } .bask-pay-slot { display: flex; flex-direction: column; gap: var(--spacing-200); width: 100%; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-pay-slot:empty { display: none; } .bask-pay-preview { display: flex; flex-direction: column; gap: var(--spacing-200); pointer-events: none; user-select: none; } .bask-pay-field { display: flex; flex-direction: column; gap: var(--spacing-50); } .bask-pay-field-label { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-pay-field-box, .bask-pay-skel-method, .bask-pay-skel-field, .bask-pay-skel-btn { font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); } .bask-pay-field-box { min-height: calc(1em + var(--spacing-300) * 2 + var(--field-border-width, var(--stroke-xs)) * 2); min-height: calc(1lh + var(--spacing-300) * 2 + var(--field-border-width, var(--stroke-xs)) * 2); border: var(--field-border-width, var(--stroke-xs)) solid var(--field-border, hsl(var(--input))); border-radius: var(--field-radius, var(--radius-lg)); background: var(--field-surface, hsl(var(--background))); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bask-pay-nmi { gap: var(--spacing-300); } .bask-pay-panel { display: flex; flex-direction: column; gap: var(--spacing-300); padding: var(--spacing-300); background: hsl(var(--card)); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-base); box-shadow: var(--shadow-low); } .bask-pay-nmi-head { display: flex; align-items: center; gap: var(--spacing-100); color: hsl(var(--primary)); } .bask-pay-nmi-head svg, .bask-pay-nmi-adorn svg, .bask-pay-nmi-fallback svg, .bask-pay-saved-row svg { font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); } .bask-pay-nmi-head svg { display: block; flex: none; width: 1em; height: 1em; width: 1lh; height: 1lh; } .bask-pay-nmi-head-title { font-weight: var(--font-weight-bold); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); } .bask-pay-nmi .bask-pay-field { gap: var(--spacing-100); } .bask-pay-nmi .bask-pay-field-label { color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); } .bask-pay-nmi-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-300); } @container bask (max-width: 479px) { .bask-pay-nmi-split { grid-template-columns: 1fr; } } .bask-pay-nmi .bask-pay-field-box { display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-300); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); } .bask-pay-field-frame { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .bask-pay-nmi .bask-pay-field-box iframe { display: block; width: 100% !important; border: 0; } .bask-pay-field-ghost { color: hsl(var(--muted-foreground)); } .bask-pay-nmi-wallet { width: 100%; min-width: 0; } .bask-pay-nmi-wallet:empty { display: none; } .bask-pay-nmi-adorn { flex: none; display: inline-flex; align-items: center; gap: var(--spacing-100); pointer-events: none; user-select: none; } .bask-pay-nmi-adorn svg { display: block; width: auto; height: 1em; height: 1lh; } .bask-pay-nmi-cvc { color: hsl(var(--muted-foreground)); } .bask-pay-nmi-alert { color: hsl(var(--destructive)); } .bask-pay-nmi-fallback { display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-300); border: var(--stroke-xs) dashed hsl(var(--border)); border-radius: var(--radius-base); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .bask-pay-nmi-fallback svg { display: block; flex: none; width: 1em; height: 1em; width: 1lh; height: 1lh; } .bask-pay-nmi-fallback .bask-pay-note { font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); } .bask-pay-field-box:focus-within, .bask-pay-field-box--focused { border-color: hsl(var(--ring)); box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-pay-field-box--invalid { border-color: hsl(var(--destructive)); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--destructive)); } .bask-pay-field-box--invalid:focus-within, .bask-pay-field-box--invalid.bask-pay-field-box--focused { border-color: hsl(var(--destructive)); box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--destructive)); } .bask-pay-field-box--pending { border-style: dashed; animation: bask-pay-pulse 1.4s ease-in-out infinite; } .bask-pay-field-error { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--destructive)); margin-top: var(--spacing-50); } .bask-pay-nmi .bask-pay-field-error { margin-top: 0; } .bask-pay-nmi .bask-pay-error { font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); } .bask-pay-pick, .bask-pay-saved { display: flex; flex-direction: column; gap: var(--spacing-200); } .bask-pay-saved-row { display: flex; align-items: center; gap: var(--spacing-200); padding: var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-base); background: hsl(var(--card)); box-shadow: var(--shadow-low); color: hsl(var(--foreground)); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bask-pay-saved-row:hover { border-color: hsl(var(--ring)); } .bask-pay-saved-row--on { border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--primary)), var(--shadow-low); } .bask-pay-saved-row:has(.bask-pay-saved-radio:focus-visible) { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-pay-saved-brand { font-weight: var(--font-weight-medium); } .bask-pay-saved-num { font-variant-numeric: tabular-nums; } .bask-pay-saved-exp { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); font-variant-numeric: tabular-nums; } .bask-pay-saved-row svg { display: block; flex: none; width: 1em; height: 1em; width: 1lh; height: 1lh; color: hsl(var(--muted-foreground)); transition: color 0.15s ease; } .bask-pay-saved-row--on svg { color: hsl(var(--primary)); } .bask-pay-panel > .bask-pay-saved-row { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .bask-pay-panel--collapsed > .bask-pay-saved-row { margin: calc(-1 * var(--spacing-300)); padding: var(--spacing-300); border-radius: var(--radius-base); } .bask-pay-panel > .bask-pay-saved-row:has(.bask-pay-saved-radio:focus-visible) { outline: none; } .bask-pay-panel:has(> .bask-pay-saved-row:hover) { border-color: hsl(var(--ring)); } .bask-pay-panel:has(> .bask-pay-saved-row--on) { border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--primary)), var(--shadow-low); } .bask-pay-panel:has(> .bask-pay-saved-row .bask-pay-saved-radio:focus-visible) { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-pay-panel-body { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-pay-panel--collapsed { gap: 0; } .bask-pay-panel--collapsed .bask-pay-panel-body { max-height: 0; overflow: hidden; visibility: hidden; } @media (prefers-reduced-motion: reduce) { .bask-pay-saved-row, .bask-pay-saved-row svg { transition: none; } } @media (prefers-reduced-motion: reduce) { .bask-pay-field-box--pending { animation: none; } } .bask-pay-skel { display: flex; flex-direction: column; gap: var(--spacing-200); } .bask-pay-skel-method { display: flex; align-items: center; gap: var(--spacing-200); padding: 0 var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: var(--radius-lg); background: hsl(var(--background)); min-height: calc(1em + var(--spacing-200) * 2 + var(--stroke-xs) * 2); min-height: calc(1lh + var(--spacing-200) * 2 + var(--stroke-xs) * 2); } .bask-pay-skel-dot { flex: none; width: 1.05rem; height: 1.05rem; border-radius: var(--radius-full); border: var(--stroke-sm) solid hsl(var(--border)); } .bask-pay-skel-chips { display: inline-flex; gap: var(--spacing-100); margin-left: auto; } .bask-pay-skel-chip { width: 1.9rem; height: 1.25rem; border-radius: min(var(--radius-base), 0.375rem); background: hsl(var(--muted)); animation: bask-pay-pulse 1.4s ease-in-out infinite; } .bask-pay-skel-field { display: flex; align-items: center; padding: 0 var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: var(--radius-lg); background: hsl(var(--background)); min-height: calc(1em + var(--spacing-200) * 2 + var(--stroke-xs) * 2); min-height: calc(1lh + var(--spacing-200) * 2 + var(--stroke-xs) * 2); } .bask-pay-skel-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-200); } .bask-pay-skel-bar { height: 0.55rem; border-radius: var(--radius-full); background: hsl(var(--muted)); animation: bask-pay-pulse 1.4s ease-in-out infinite; } .bask-pay-skel-bar--label { width: 34%; } .bask-pay-skel-bar--card { width: 55%; animation-delay: 0.15s; } .bask-pay-skel-bar--hint { width: 60%; animation-delay: 0.3s; } .bask-pay-skel-btn { min-height: calc(1em + var(--spacing-300) * 2); min-height: calc(1lh + var(--spacing-300) * 2); border-radius: var(--radius-lg); background: hsl(var(--muted)); animation: bask-pay-pulse 1.4s ease-in-out infinite; animation-delay: 0.45s; } @keyframes bask-pay-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .bask-pay-skel-bar, .bask-pay-skel-chip, .bask-pay-skel-btn { animation: none; opacity: 0.8; } } .bask-pay-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: var(--btn-default-border-width, 0px) var(--btn-default-border-style, none) var(--btn-default-border, transparent); border-radius: var(--btn-default-radius, var(--radius-lg)); padding: var(--spacing-300) var(--spacing-400); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); background: var(--btn-default-fill, hsl(var(--primary))); color: var(--btn-default-text, hsl(var(--primary-foreground))); } .bask-pay-btn:disabled { opacity: var(--btn-disabled-opacity, 0.6); } .bask-pay-btn:disabled:hover { opacity: var(--btn-disabled-opacity, 0.6); } .bask-pay-btn--busy { cursor: progress; } .bask-pay-btn--busy:has(.bask-pay-spinner) { gap: var(--spacing-200); } .bask-pay-canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-200); padding: var(--spacing-900) var(--spacing-400); background: hsl(var(--muted)); border: var(--stroke-xs) dashed hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); text-align: center; } .bask-pay-canvas-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: hsl(var(--background)); border: var(--stroke-xs) solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 1.15rem; } .bask-pay-canvas-title { font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--foreground)); } .bask-pay-canvas-sub { font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); color: hsl(var(--muted-foreground)); } .bask-pay-note { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-pay-error { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--destructive)); } .bask-coupon { width: 100%; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-coupon-stack { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-addon { display: flex; flex-direction: column; width: 100%; font-family: var(--font-family-body); color: hsl(var(--foreground)); text-align: start; } .bask-addon svg { display: block; } .bask-addon__title { font-weight: var(--font-weight-medium); margin: 0 0 var(--spacing-300) 0; } .bask-addon__head { display: flex; flex-direction: column; gap: var(--spacing-100); margin-bottom: var(--spacing-300); } .bask-addon__head:empty { display: none; } .bask-addon__empty { margin: 0; color: hsl(var(--muted-foreground)); } .bask-addon__grid { display: flex; flex-direction: column; gap: var(--spacing-400); } .bask-addon__unlock { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--spacing-100); width: 100%; min-width: 0; padding: var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); font-variant-numeric: tabular-nums; } .bask-addon__unlock p { margin: 0; } .bask-addon__unlock-saving { color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); } .bask-addon__card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-300); padding: 0.85em 1em; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); background: hsl(var(--card)); box-shadow: var(--shadow-low); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease; } .bask-addon__card:hover { border-color: hsl(var(--primary)); box-shadow: var(--shadow-mid); } .bask-addon__card[data-expandable]:hover { transform: translateY(-2px); } .bask-addon__card--added { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--primary)), var(--shadow-low); } .bask-addon__card--added:hover { box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--primary)), var(--shadow-mid); } .bask-addon__price { margin-top: 0.15em; font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } .bask-addon__cadence-text { margin-top: 0.35em; align-self: flex-start; font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); color: hsl(var(--muted-foreground)); } .bask-addon__card[data-expandable] { cursor: pointer; } .bask-offer, .bask-offer__copy, .bask-offer__zone, .bask-offer__copy > [data-brick-id], .bask-offer__zone > [data-puck-component] { display: flex; flex-direction: column; min-width: 0; } .bask-offer { gap: var(--spacing-200); transition: transform 150ms ease; } .bask-offer .bask-choice-frame { flex-wrap: wrap; font-size: inherit; line-height: inherit; letter-spacing: inherit; } body:has(#frame-root) .bask-offer .bask-choice-frame > [data-puck-component]:has(> .bask-flex:is([style*="flex: 1 1 0%"], [style*="flex:1 1 0%"])) { flex: 1 1 auto; } .bask-offer .bask-plan-card { --bask-plan-pad: 0.6em 0.75em; } body:has(#frame-root) .bask-offer .bask-choice-frame [data-puck-component]:has(> .bask-plan-cards) { flex: 0 0 100%; } .bask-offer [data-bask-inline-id$="-price"] { font-variant-numeric: tabular-nums; } .bask-offer:hover .bask-choice-frame { border-color: var(--cf-hover, var(--cf-border)); } .bask-offer[data-checked] .bask-choice-frame { background: var(--cf-sel-bg, var(--cf-bg)); color: var(--cf-sel-fg, var(--cf-fg, inherit)); border-color: var(--cf-sel-border, var(--cf-border)); box-shadow: inset 0 0 0 var(--cf-bw) var(--cf-sel-border, transparent), var(--cf-sel-shadow, 0 0 #0000); } .bask-offer[data-expandable] { cursor: pointer; } .bask-offer[data-expandable]:hover { transform: translateY(-2px); } .bask-addon .bask-offer:hover .bask-choice-frame[style*="--cf-shadow"] { box-shadow: var(--shadow-mid); } .bask-addon .bask-offer[data-checked]:hover .bask-choice-frame[style*="--cf-shadow"] { box-shadow: inset 0 0 0 var(--cf-bw) var(--cf-sel-border, transparent), var(--shadow-mid); } .bask-offer [data-offer-plans] > svg:last-child { transition: transform 150ms ease; } .bask-offer [data-offer-plans][aria-expanded="true"] > svg:last-child { transform: rotate(180deg); } .bask-offer .bask-flex:empty { display: none; } .bask-addon__btn { position: relative; flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 2.5em; cursor: pointer; border: var(--stroke-xs) solid transparent; border-radius: var(--radius-full); padding: 0.5em 1.1em; font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: 0.95em; line-height: 1.2; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transition: transform 120ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .bask-addon__btn:active:not(:disabled) { transform: scale(0.97); } .bask-addon__btn .bask-button__content { white-space: nowrap; } .bask-addon__btn:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: progress; } .bask-addon--repricing .bask-addon__price { opacity: 0.55; transition: opacity 150ms ease; } @container bask (max-width: 40rem) { .bask-addon__card { flex-wrap: wrap; gap: var(--spacing-200); } .bask-addon__btn { width: 100%; } .bask-offer [data-offer-add]:not([data-shape="circle"]) { width: 100% !important; } .bask-addon__btn, .bask-offer [data-offer-add] { order: 2; } body:has(#frame-root) .bask-offer .bask-choice-frame [data-puck-component]:has(> [data-offer-add]) { order: 2; } body:has(#frame-root) .bask-offer .bask-choice-frame [data-puck-component]:has(> [data-offer-add]:not([data-shape="circle"])) { flex: 0 0 100%; } body:has(#frame-root) .bask-offer .bask-choice-frame > [data-puck-component]:has(> .bask-flex:is([style*="flex: 1 1 0%"], [style*="flex:1 1 0%"])) { flex-basis: 60%; } } @media (prefers-reduced-motion: reduce) { .bask-addon__card, .bask-addon__btn, .bask-addon__price { transition: none; } .bask-addon__card[data-expandable]:hover { transform: none; } .bask-offer, .bask-offer [data-offer-plans] > svg:last-child { transition: none; } .bask-offer[data-expandable]:hover { transform: none; } .bask-addon__btn:active:not(:disabled) { transform: none; } } .bask-upsell { width: 100%; font-family: var(--font-family-body); color: hsl(var(--foreground)); text-align: start; } .bask-upsell, .bask-upsell p { overflow-wrap: break-word; word-break: normal; } .bask-upsell svg { display: block; } .bask-upsell__stack { display: flex; flex-direction: column; gap: var(--spacing-400); } .bask-upsell__slot { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; } .bask-upsell__slot:empty { display: none; } .bask-upsell__empty { margin: 0; color: hsl(var(--muted-foreground)); } .bask-upsell__grid { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-upsell__card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-300); padding: 0.85em 1em; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); background: hsl(var(--card)); box-shadow: var(--shadow-low); transition: box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease; } .bask-upsell__template { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-300); flex: 1 1 auto; min-width: 0; } .bask-upsell__template > [data-brick-id] { display: contents; } .bask-upsell__template > .bask-upsell__template { flex: 1 1 auto; } .bask-upsell__plain { display: flex; flex-direction: column; gap: 0.45em; flex: 1 1 auto; min-width: 0; } .bask-upsell__card .bask-flex { min-width: 0; } .bask-upsell__card .bask-type:not([style*="--line-height-"]) { line-height: inherit; } .bask-offer .bask-type:not([style*="--line-height-"]) { line-height: inherit; } .bask-upsell__fill { flex: 1 1 auto; } body:has(#frame-root) .bask-upsell__template > [data-puck-component]:has(> .bask-flex:is([style*="flex: 1 1 0%"], [style*="flex:1 1 0%"])) { flex: 1 1 auto; } body:has(#frame-root) [data-puck-component]:has(> .bask-type[data-wrapping="nowrap"]) { flex-shrink: 0; } body:has(#frame-root) [data-puck-component]:has(> .bask-type[data-wrapping="truncate"]) { min-width: 0; } .bask-upsell__figures, .bask-upsell__template [data-bask-inline-id$="-price"] { font-variant-numeric: tabular-nums; } .bask-upsell__example { flex: 0 0 100%; display: flex; } .bask-upsell__card--added { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--primary)), var(--shadow-low); } .bask-upsell__skel-img { display: block; width: 3.25em; height: 3.25em; flex: 0 0 auto; border-radius: min(var(--radius-lg), 0.75rem); background: hsl(var(--muted)); animation-duration: 1.6s; } .bask-upsell__skel-body { display: flex; flex: 1 1 8em; flex-direction: column; gap: 0.5em; } .bask-upsell__skel-line { display: block; height: 1em; border-radius: var(--radius-base); background: hsl(var(--muted)); animation-duration: 1.6s; } .bask-upsell__skel-line:nth-child(2) { width: 60%; } .bask-upsell__badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.3em; padding: 0.15em 0.55em; border-radius: var(--radius-full); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-size: 0.75em; font-weight: var(--font-weight-medium); line-height: 1.4; } .bask-upsell__checkout { display: flex; flex-direction: column; gap: var(--spacing-300); padding: 1em; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); background: hsl(var(--card)); } .bask-upsell__picks { display: flex; flex-direction: column; gap: var(--spacing-200); margin: 0; padding: 0; list-style: none; } .bask-upsell__pick { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); } .bask-upsell__pick-body { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; } .bask-upsell__pick-name { font-weight: var(--font-weight-medium); } .bask-upsell__pick-terms { color: hsl(var(--muted-foreground)); font-size: 0.9em; } .bask-upsell__pick-remove { flex: 0 0 auto; cursor: pointer; border: 0; background: transparent; color: hsl(var(--primary)); font-family: var(--font-family-body); text-decoration: underline; padding: 0.25em 0.5em; } .bask-upsell__pick-remove:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: progress; } .bask-upsell__totals { display: flex; flex-direction: column; gap: 0.35em; margin: 0; } .bask-upsell__total-row { display: flex; justify-content: space-between; gap: var(--spacing-200); font-variant-numeric: tabular-nums; } .bask-upsell__total-row dt, .bask-upsell__total-row dd { margin: 0; } .bask-upsell__total-row--total { font-weight: var(--font-weight-medium); } .bask-upsell__skip { cursor: pointer; border: 0; background: transparent; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); text-decoration: underline; padding: 0.5em 1em; min-height: 2.75rem; } .bask-upsell__skip:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: progress; } @container bask (max-width: 40rem) { .bask-upsell__card { gap: var(--spacing-200); } .bask-upsell__fill { flex-basis: 60%; } body:has(#frame-root) .bask-upsell__template > [data-puck-component]:has(> .bask-flex:is([style*="flex: 1 1 0%"], [style*="flex:1 1 0%"])) { flex-basis: 60%; } .bask-upsell__checkout { padding: var(--spacing-300); } } @media (prefers-reduced-motion: reduce) { .bask-upsell__card { transition: none; } } .bask-coupon svg { display: block; } .bask-coupon-row { display: flex; align-items: center; gap: var(--spacing-200); } .bask-coupon--stacked .bask-coupon-row { flex-direction: column; align-items: stretch; } .bask-coupon-input { flex: 1 1 auto; min-width: 0; } .bask-coupon-apply { position: relative; flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: calc(1em + var(--spacing-200) * 2 + var(--stroke-xs) * 2); min-height: calc(1lh + var(--spacing-200) * 2 + var(--stroke-xs) * 2); cursor: pointer; border: none; border-radius: var(--radius-lg); padding: var(--spacing-200) var(--spacing-400); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-02); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .bask-coupon-apply-label, .bask-coupon-apply .bask-coupon-spinner { font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); } .bask-coupon-apply[aria-busy="true"] .bask-coupon-apply-label { visibility: hidden; } .bask-coupon-apply .bask-coupon-spinner { position: absolute; inset: 0; margin: auto; } .bask-coupon--stacked .bask-coupon-apply { width: 100%; } .bask-coupon-apply:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: not-allowed; } .bask-coupon-details { width: 100%; } .bask-coupon-toggle { display: inline-flex; align-items: center; gap: var(--spacing-100); width: fit-content; cursor: pointer; list-style: none; font-family: var(--font-family-body); text-decoration: underline; text-underline-offset: 2px; } .bask-coupon-toggle::-webkit-details-marker { display: none; } .bask-coupon-chevron { display: inline-flex; transition: transform 150ms ease; } .bask-coupon-details[open] .bask-coupon-chevron { transform: rotate(180deg); } .bask-coupon-details[open] > .bask-coupon-row { margin-top: var(--spacing-200); } .bask-coupon-applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-200); padding: var(--spacing-200) var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--muted)); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); } .bask-coupon-applied-head { display: inline-flex; align-items: center; margin-right: auto; min-width: 0; } .bask-coupon-tag { flex: 0 0 auto; display: inline-flex; align-items: center; padding: var(--spacing-50) var(--spacing-200); border-radius: var(--radius-full); background: hsl(var(--background)); border: var(--stroke-xs) solid hsl(var(--border)); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); color: hsl(var(--foreground)); } .bask-coupon-discount { flex: 0 0 auto; color: hsl(var(--muted-foreground)); } .bask-coupon-remove { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--spacing-50); padding: var(--spacing-50) var(--spacing-100); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); background: transparent; cursor: pointer; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); } .bask-coupon-remove:hover { border-color: hsl(var(--foreground)); color: hsl(var(--foreground)); } .bask-coupon-remove:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: not-allowed; } .bask-coupon-applied-body { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-200); } .bask-coupon-remove-part { flex: 0 0 auto; display: flex; } .bask-coupon-spinner, .bask-pay-spinner, .bask-cart-checkout-spinner, .bask-button__spinner, .bask-file-spinner, .bask-clinical-spinner { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; border: var(--stroke-sm) solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation-duration: 0.6s; } .bask-coupon-msg { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); } .bask-coupon-msg--error { color: hsl(var(--destructive)); } .bask-coupon-msg-body { display: flex; flex-direction: column; gap: var(--spacing-50); } .bask-coupon-state { display: flex; flex-direction: column; gap: var(--spacing-100); margin-top: var(--spacing-300); } .bask-osum { width: 100%; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-osum svg { display: block; } .bask-osum-title, .bask-osum-toggle-label, .bask-osum-toggle-total, .bask-osum-row p { overflow-wrap: normal; word-break: normal; } .bask-osum-row .bask-flex--row:has(> span.bask-pos):not(:last-child) { margin-bottom: 0.35em; } .bask-osum-frame { padding: 1.5em; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); background: hsl(var(--card)); } .bask-osum-frame--outline { background: transparent; } .bask-osum-body { display: flex; flex-direction: column; gap: 1.25em; } .bask-osum-lab { display: flex; flex-direction: column; gap: var(--spacing-50); margin: 0; padding-top: 1em; border-top: 1px solid hsl(var(--border)); } .bask-osum-lab-label { font-size: 0.875em; color: hsl(var(--muted-foreground)); } .bask-osum-lab-time { font-weight: 600; color: hsl(var(--foreground)); } .bask-osum-lab-place { font-size: 0.875em; color: hsl(var(--muted-foreground)); } .bask-osum-labkit { display: flex; flex-direction: column; gap: var(--spacing-50); margin-top: 0.75em; text-align: left; } .bask-osum-labkit-row { display: flex; justify-content: space-between; gap: 0.75em; margin: 0; } .bask-osum-labkit-label { font-size: 0.875em; color: hsl(var(--muted-foreground)); } .bask-osum-labkit-value { font-size: 0.875em; text-align: right; color: hsl(var(--foreground)); } .bask-osum-labkit-biomarkers { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-25); margin-top: 0.25em; } .bask-osum-labkit-biomarkers ul { margin: 0; padding: 0; list-style: none; font-size: 0.875em; color: hsl(var(--foreground)); } .bask-osum--repricing .bask-osum-body, .bask-osum--repricing .bask-osum-toggle-total { opacity: 0.55; transition: opacity 150ms ease; } @media (prefers-reduced-motion: reduce) { .bask-osum--repricing .bask-osum-body, .bask-osum--repricing .bask-osum-toggle-total { transition: none; } } .bask-osum-details { width: 100%; } .bask-osum-toggle { display: flex; align-items: center; gap: 0.6em; cursor: pointer; list-style: none; user-select: none; font-weight: var(--font-weight-medium); } .bask-osum-toggle::-webkit-details-marker { display: none; } .bask-osum-toggle-label { margin-right: auto; } .bask-osum-toggle-total { font-variant-numeric: tabular-nums; } .bask-osum-chevron { display: inline-flex; color: hsl(var(--muted-foreground)); transition: transform 150ms ease; } .bask-osum-details[open] .bask-osum-chevron { transform: rotate(180deg); } .bask-osum-details[open] > .bask-osum-toggle { margin-bottom: 1.25em; } @media (prefers-reduced-motion: reduce) { .bask-osum-chevron { transition: none; } } .bask-osum-cb-title { margin: 0 0 1.25em; font-family: var(--font-family-heading); font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); letter-spacing: var(--letter-spacing-heading-05); font-weight: var(--font-weight-heading); color: hsl(var(--foreground)); } .bask-osum-cb-toggle { display: none; } @container bask (max-width: 1023px) { .bask-osum-cb-title { display: none; } .bask-osum-cb-toggle { display: flex; align-items: center; gap: 0.5em; width: 100%; min-height: 2.75em; margin: 0; padding: 0; border: none; background: none; cursor: pointer; text-align: start; font: inherit; font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); } .bask-osum-cb-toggle:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-base); } .bask-osum-cb-icon { display: inline-flex; color: hsl(var(--primary)); } .bask-osum-cb-label { color: hsl(var(--primary)); } .bask-osum-cb-toggle .bask-osum-chevron { color: hsl(var(--primary)); } .bask-osum-cb--open .bask-osum-cb-toggle .bask-osum-chevron { transform: rotate(180deg); } .bask-osum-cb-toggle .bask-osum-toggle-total { margin-left: auto; font-size: 1.1em; font-weight: var(--font-weight-bold); } .bask-osum-cb-region { display: none; } .bask-osum-cb--open .bask-osum-cb-region { display: block; margin-top: 1em; padding-top: 1.25em; border-top: var(--stroke-xs) solid hsl(var(--border)); animation: bask-osum-cb-in 180ms ease-out; } } @keyframes bask-osum-cb-in { from { opacity: 0; transform: translateY(-0.25em); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .bask-osum-cb--open .bask-osum-cb-region { animation: none; } } .bask-osum-rows { width: 100%; } .bask-osum-rows--totals:not(:first-child) { padding-top: 1em; border-top: var(--stroke-xs) solid hsl(var(--border)); } .bask-osum-row { width: 100%; } .bask-osum-row--child { padding-left: 1.75em; font-size: 0.92em; } .bask-osum-row--total { margin-top: 0.45em; font-size: 1.15em; line-height: 1.45; font-weight: var(--font-weight-medium); } .bask-osum-row--editable { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 0.75em; row-gap: 0.5em; } .bask-osum-row--editable > .bask-flex--row, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row { display: grid; grid-template-columns: minmax(0, auto) minmax(min(100%, 6rem), 1fr); align-items: start; row-gap: 0.35em; } .bask-osum-row--editable > .bask-flex--row > *:first-child, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row > *:first-child, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row > *:first-child { display: contents; } .bask-osum-row--editable > .bask-flex--row > *:last-child, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row > *:last-child, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row > *:last-child { grid-column: 2; } .bask-osum-row--editable > .bask-flex--row > *:first-child > span.bask-pos, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row > *:first-child > span.bask-pos, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row > *:first-child > span.bask-pos { grid-column: 1; justify-self: start; } .bask-osum-row--editable > .bask-flex--row:has(> *:first-child > span.bask-pos) > *:last-child, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row:has(> *:first-child > span.bask-pos) > *:last-child, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row:has(> *:first-child > span.bask-pos) > *:last-child { grid-row: 1; } .bask-osum-row--editable > .bask-flex--row:not(:has(> *:first-child > .bask-flex--col)) > *:last-child, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row:not(:has(> *:first-child > .bask-flex--col)) > *:last-child, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row:not(:has(> *:first-child > .bask-flex--col)) > *:last-child { justify-self: end; } .bask-osum-row--editable > .bask-flex--row > *:first-child > :is(img, .bask-size, .bask-img-swap):first-child, .bask-osum-row:not(.bask-osum-row--editable) > .bask-flex--row > *:first-child > :is(img, .bask-size, .bask-img-swap):first-child, .bask-osum-row:not(.bask-osum-row--editable) > *:not(.bask-flex) > .bask-flex--row > *:first-child > :is(img, .bask-size, .bask-img-swap):first-child { grid-row: span 2; } .bask-osum-row--editable > *:not(.bask-osum-qty) { grid-column: 1; } .bask-osum-row--editable > .bask-osum-qty { grid-column: 2; grid-row: 1; justify-self: end; } .bask-osum-row--child .bask-flex--col > .bask-flex--row:first-child:has(> .bask-badge) { flex-wrap: wrap; } .bask-osum-row--child .bask-flex--col > .bask-flex--row:first-child:has(> .bask-badge) > p:first-child { flex-basis: 100%; } .bask-osum-row:has(:is(img, .bask-size)) > .bask-osum-renew { margin-left: calc(2.75rem + var(--spacing-300)); } .bask-osum-qty { display: inline-flex; align-items: center; gap: 0.15em; flex: 0 0 auto; margin-left: auto; } .bask-osum-qty > button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75em; min-height: 2.75em; } .bask-osum-qty > button[disabled] { cursor: default; } .bask-cart-policy-notice { display: flex; flex-direction: column; gap: var(--spacing-100); padding: var(--spacing-400); margin-block: var(--spacing-300); border: var(--stroke-xs) solid currentColor; border-radius: var(--radius-lg); overflow-wrap: anywhere; font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); } .bask-osum-empty { display: flex; align-items: center; justify-content: center; gap: 0.5em; padding: 1.75em; border: var(--stroke-xs) dashed hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); text-align: center; } .bask-osum-frame > .bask-osum-empty { border: none; background: none; padding: 0.5em 0; } .bask-osum-empty-icon { display: inline-flex; } .bask-osum-skel { display: flex; flex-direction: column; gap: 1em; } .bask-osum-skel > span { display: block; background: hsl(var(--muted)); border-radius: var(--radius-base); height: 1.4em; animation-duration: 1.6s; } .bask-osum-skel > span:nth-child(1) { height: 3.4em; } .bask-osum-skel > span:nth-child(2) { height: 3.4em; width: 85%; } .bask-osum-skel > span:nth-child(3) { width: 60%; } .bask-osum-skel > span:nth-child(4) { width: 40%; } @container bask (max-width: 40rem) { .bask-osum-frame { padding: 1em; } .bask-osum-body { gap: 1em; } .bask-osum-row--child { padding-left: 1.1em; } .bask-osum-row:has(:is(img, .bask-size)) > .bask-osum-renew { margin-left: calc(2rem + var(--spacing-300)); } .bask-osum-empty { padding: 1.25em; } .bask-osum-details[open] > .bask-osum-toggle { margin-bottom: 1em; } } .bask-checkbox-row { display: flex; align-items: center; gap: var(--spacing-200); cursor: pointer; } .bask-checkbox-card, .bask-checkbox-btn { box-sizing: border-box; min-height: 3.5rem; padding: var(--spacing-300); border: var(--field-border-width, var(--stroke-xs)) solid var(--option-border, hsl(var(--input))); border-radius: min(var(--option-radius, var(--radius-lg)), 1rem); background: var(--option-surface, hsl(var(--background))); transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } .bask-checkbox-card:hover, .bask-checkbox-btn:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-checkbox-card:has(.bask-field-desc) { align-items: flex-start; } .bask-checkbox-card:has(.bask-field-desc) .bask-checkbox { margin-top: 0.15em; } .bask-checkbox-card:has(.bask-choice-body > :nth-child(2)), .bask-checkbox-card:has(.bask-choice-body > .bask-field-tpl-zone > :nth-child(2)) { align-items: flex-start; } .bask-checkbox-card:has(.bask-choice-body > :nth-child(2)) .bask-checkbox, .bask-checkbox-card:has(.bask-choice-body > .bask-field-tpl-zone > :nth-child(2)) .bask-checkbox { margin-top: 0.15em; } .bask-checkbox-card:has(.bask-choice-body > :nth-child(2)) .bask-radio-ind, .bask-checkbox-card:has(.bask-choice-body > .bask-field-tpl-zone > :nth-child(2)) .bask-radio-ind { margin-top: 0.15em; } .bask-checkbox-row > .bask-checkbox-tpl { display: inline-flex; flex: 0 0 auto; width: auto; } .bask-checkbox-row:has(> input:checked) .bask-radio-ind { background: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); border-color: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-checkbox-row:has(> input:checked) .bask-radio-ind-mark { opacity: 1; transform: none; } .bask-checkbox-row:not(:has(> input:checked)):hover .bask-radio-ind[data-checked-style="filled"], .bask-checkbox-row:hover .bask-radio-ind[data-checked-style="ring"] { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-checkbox-row:has(> input:checked) .bask-radio-ind[data-checked-style="ring"] { background: var(--ri-bg, var(--indicator-surface, hsl(var(--background)))); border-color: var(--ri-checked, var(--indicator-checked, hsl(var(--primary)))); } .bask-checkbox-row:has(> input:checked) .bask-radio-ind[data-checked-style="mark"] { background: transparent; border-color: transparent; } .bask-checkbox-row:has(> input:focus-visible) .bask-radio-ind { box-shadow: 0 0 0 var(--stroke-xs) var(--focus-ring, hsl(var(--ring))); } [data-bask-invalid] .bask-checkbox-row .bask-radio-ind:not([data-checked-style="mark"]) { border-color: hsl(var(--destructive)); } .bask-checkbox-card:has(input:checked) { border-color: var(--option-selected-border, hsl(var(--primary))); background: hsl(var(--accent)); box-shadow: inset 0 0 0 var(--field-border-width, var(--stroke-xs)) var(--option-selected-border, hsl(var(--primary))); } .bask-checkbox-btn { justify-content: center; } .bask-checkbox-btn .bask-choice-body { text-align: center; } .bask-checkbox-btn:has(input:checked) { border-color: var(--indicator-checked, hsl(var(--primary))); background: var(--indicator-checked, hsl(var(--primary))); } .bask-checkbox-btn:has(input:checked) .bask-field-label, .bask-checkbox-btn:has(input:checked) .bask-field-desc { color: var(--indicator-mark, hsl(var(--primary-foreground))); } .bask-checkbox-btn:has(input:checked) .bask-choice-body .bask-type { color: var(--indicator-mark, hsl(var(--primary-foreground))) !important; } .bask-checkbox-btn:has(input:focus-visible), .bask-checkbox-card:has(input:focus-visible) { box-shadow: inset 0 0 0 var(--focus-width, var(--stroke-sm)) var(--focus-ring, hsl(var(--ring))); } @media (prefers-reduced-motion: reduce) { .bask-checkbox-card, .bask-checkbox-btn { transition: none; } } .bask-consent-sections { --bask-accordion-bg: var(--option-surface, hsl(var(--background))); --bask-accordion-border: var(--option-border, hsl(var(--input))); --bask-accordion-radius: min(var(--option-radius, var(--radius-lg)), 1rem); --bask-accordion-fg: hsl(var(--foreground)); margin-bottom: var(--spacing-100); } .bask-consent-sections .bask-accordion-trigger { font-weight: var(--font-weight-bold); } .bask-consent-section-body { margin: 0; white-space: pre-line; font-family: var(--font-family-body); font-size: var(--font-size-body-02, var(--font-size-body-01)); line-height: var(--line-height-body-02, var(--line-height-body-01)); } .bask-consent-check { display: block; } .bask-consent-header { margin: 0 0 var(--spacing-100); font-family: var(--font-family-heading, var(--font-family-body)); font-size: var(--font-size-heading-05, var(--font-size-body-01)); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading-05, var(--line-height-body-01)); color: hsl(var(--foreground)); } .bask-switch { all: unset; box-sizing: border-box; position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; width: 2.4em; height: 1.4em; padding: 0.15em; background: hsl(var(--muted)); box-shadow: inset 0 0 0 var(--stroke-xs) var(--field-border, hsl(var(--input))); border-radius: var(--radius-full); cursor: pointer; transition: background 140ms ease, box-shadow 140ms ease; } .bask-switch::before { content: ""; display: block; width: 1.1em; height: 1.1em; border-radius: var(--radius-full); background: var(--indicator-surface, hsl(var(--background))); box-shadow: var(--shadow-low); transition: transform 140ms ease; } .bask-switch:checked { background: var(--indicator-checked, hsl(var(--primary))); box-shadow: inset 0 0 0 var(--stroke-xs) var(--indicator-checked, hsl(var(--primary))); } .bask-switch:checked::before { transform: translateX(1em); } .bask-switch:hover { box-shadow: inset 0 0 0 var(--stroke-xs) var(--focus-ring, hsl(var(--ring))); } .bask-switch:focus-visible { outline: var(--stroke-sm) solid var(--focus-ring, hsl(var(--ring))); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bask-switch, .bask-switch::before { transition: none; } } .bask-slider-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-100); } .bask-slider-label > .bask-field-tpl, .bask-slider-label > .bask-field-tpl > .bask-field-tpl-zone { display: contents; } .bask-slider-value { font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); color: hsl(var(--muted-foreground)); } .bask-slider { -webkit-appearance: none; appearance: none; width: 100%; height: var(--bask-slider-h, 1.25rem); box-sizing: border-box; margin: 0; background: transparent; cursor: pointer; } .bask-slider::-webkit-slider-runnable-track { height: var(--bask-slider-track, 0.4rem); border-radius: var(--radius-full); background: linear-gradient( to right, hsl(var(--primary)) var(--bask-slider-fill, 0%), hsl(var(--muted)) var(--bask-slider-fill, 0%) ); } .bask-slider::-moz-range-track { height: var(--bask-slider-track, 0.4rem); border-radius: var(--radius-full); background: hsl(var(--muted)); } .bask-slider::-moz-range-progress { height: var(--bask-slider-track, 0.4rem); border-radius: var(--radius-full); background: hsl(var(--primary)); } .bask-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: var(--bask-slider-thumb, 1.1rem); height: var(--bask-slider-thumb, 1.1rem); margin-top: calc( (var(--bask-slider-track, 0.4rem) - var(--bask-slider-thumb, 1.1rem)) / 2 ); border-radius: var(--radius-full); background: hsl(var(--background)); border: var(--stroke-sm) solid hsl(var(--primary)); box-shadow: var(--shadow-low); cursor: pointer; transition: transform 100ms ease, box-shadow 100ms ease; } .bask-slider::-moz-range-thumb { box-sizing: border-box; width: var(--bask-slider-thumb, 1.1rem); height: var(--bask-slider-thumb, 1.1rem); border-radius: var(--radius-full); background: hsl(var(--background)); border: var(--stroke-sm) solid hsl(var(--primary)); box-shadow: var(--shadow-low); cursor: pointer; transition: transform 100ms ease, box-shadow 100ms ease; } .bask-slider:hover::-webkit-slider-thumb, .bask-slider:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: var(--shadow-mid); } .bask-slider:hover::-moz-range-thumb, .bask-slider:active::-moz-range-thumb { transform: scale(1.12); box-shadow: var(--shadow-mid); } .bask-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--stroke-sm) hsl(var(--ring)), var(--shadow-low); } .bask-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 var(--stroke-sm) hsl(var(--ring)), var(--shadow-low); } @media (prefers-reduced-motion: reduce) { .bask-slider::-webkit-slider-thumb, .bask-slider::-moz-range-thumb { transition: none; } } .bask-slider-track-wrap { position: relative; display: flex; flex-direction: column; } .bask-slider-bubble { position: absolute; bottom: calc(100% + var(--spacing-100)); transform: translateX(-50%); padding: var(--spacing-25) var(--spacing-100); background: hsl(var(--foreground)); color: hsl(var(--background)); border-radius: var(--radius-base); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms ease; } .bask-slider-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 0.3rem solid transparent; border-top-color: hsl(var(--foreground)); } .bask-slider-track-wrap:hover .bask-slider-bubble, .bask-slider-track-wrap:focus-within .bask-slider-bubble { opacity: 1; } @media (prefers-reduced-motion: reduce) { .bask-slider-bubble { transition: none; } } .bask-slider-ticks { position: relative; height: 0.35rem; margin-top: var(--spacing-25); } .bask-slider-tick { position: absolute; top: 0; transform: translateX(-50%); width: var(--stroke-sm); height: 100%; background: hsl(var(--input)); border-radius: var(--radius-full); } .bask-slider-scale { position: relative; height: 1.25em; margin-top: var(--spacing-25); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-slider-scale > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .bask-flow-progress-box { width: 100%; --bask-ph: var(--bask-progress-h, 0.625rem); --bask-pg: var(--bask-progress-gap, var(--spacing-50)); } @container bask (max-width: 1023px) { .bask-flow-progress-box { --bask-ph: var(--bask-progress-h-md, var(--bask-progress-h, 0.625rem)); --bask-pg: var(--bask-progress-gap-md, var(--bask-progress-gap, var(--spacing-50))); } } @container bask (max-width: 639px) { .bask-flow-progress-box { --bask-ph: var(--bask-progress-h-sm, var(--bask-progress-h-md, var(--bask-progress-h, 0.625rem))); --bask-pg: var(--bask-progress-gap-sm, var(--bask-progress-gap-md, var(--bask-progress-gap, var(--spacing-50)))); } } .bask-flow-progress { display: flex; align-items: center; gap: var(--spacing-300); width: 100%; } .bask-flow-progress--top { flex-direction: column; align-items: stretch; } .bask-flow-progress[data-width="flow"] { box-sizing: border-box; max-width: var(--b-mw, 640px); margin-inline: auto; padding-inline: var(--spacing-600); } .bask-flow-progress[data-width="full"] { box-sizing: border-box; width: 100cqw; margin-inline: calc(50% - 50cqw); padding-inline: var(--spacing-600); } .bask-flow-progress-back { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 1rem; margin: -1rem; border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; line-height: 0; border-radius: var(--radius-lg); transition: background 120ms ease, color 120ms ease; } .bask-flow-progress-back svg { width: 0.5rem; height: auto; } .bask-flow-progress-back:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } @media (prefers-reduced-motion: reduce) { .bask-flow-progress-back { transition: none; } } .bask-flow-progress-track { flex: 1 1 auto; min-width: 0; height: var(--bask-ph, 0.625rem); background: var(--bask-progress-track); border-radius: var(--bask-progress-radius); overflow: hidden; } .bask-flow-progress-fill { display: block; height: 100%; background: var(--bask-progress-fill); border-radius: inherit; transition: width 240ms ease; } .bask-flow-progress-chunks { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--bask-pg, var(--spacing-50)); } .bask-flow-progress-chunk { flex: 1 1 0; height: var(--bask-ph, 0.625rem); background: var(--bask-progress-track); border-radius: var(--bask-progress-radius); overflow: hidden; } .bask-flow-progress-chunk-fill { display: block; height: 100%; background: var(--bask-progress-fill); border-radius: inherit; transition: width 240ms ease; } .bask-flow-progress-steps { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--bask-pg, var(--spacing-50)); } .bask-flow-progress-seg { flex: 1 1 0; height: var(--bask-ph, 0.625rem); background: var(--bask-progress-track); border-radius: var(--bask-progress-radius); transition: background 240ms ease; } .bask-flow-progress-seg[data-on] { background: var(--bask-progress-fill); } .bask-flow-progress-label { flex: 0 0 auto; font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .bask-flow-progress-fill, .bask-flow-progress-seg { transition: none; } } .bask-tier-box { width: 100%; } .bask-tier { display: flex; flex-direction: column; gap: var(--spacing-100); transition: opacity 150ms ease; } .bask-tier[aria-busy="true"] { opacity: var(--btn-disabled-opacity, 0.6); } .bask-tier-message { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); } .bask-tier-steps { display: flex; gap: var(--spacing-50); margin: 0; padding: 0; list-style: none; } .bask-tier-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-50); } .bask-tier-seg { display: block; height: var(--spacing-100); background: var(--bask-tier-track); border-radius: var(--radius-full); transition: background 240ms ease; } .bask-tier-step[data-on] .bask-tier-seg { background: var(--bask-tier-fill); } .bask-tier-label { font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); letter-spacing: var(--letter-spacing-body-03); color: hsl(var(--muted-foreground)); text-align: center; } .bask-tier-step[data-on] .bask-tier-label { color: hsl(var(--foreground)); } @media (prefers-reduced-motion: reduce) { .bask-tier, .bask-tier-seg { transition: none; } } .bask-select { appearance: none; -webkit-appearance: none; cursor: pointer; accent-color: hsl(var(--primary)); padding-right: calc(var(--spacing-700) * var(--bask-fs-k, 1)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--bask-fs-px, var(--spacing-300)) center; background-size: 0.75em; color: hsl(var(--foreground)); } .bask-select:invalid { color: hsl(var(--muted-foreground)); } .bask-select-trigger { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); text-align: left; cursor: pointer; } .bask-select-trigger[data-empty] .bask-select-value { color: hsl(var(--muted-foreground)); } .bask-select-trigger[data-disabled] { cursor: not-allowed; opacity: 0.6; } .bask-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bask-select-chevron { display: inline-flex; flex: 0 0 auto; width: calc(0.7em * var(--bask-fs-k, 1)); color: hsl(var(--muted-foreground)); transition: transform 120ms ease; } .bask-select-chevron svg { width: 100%; height: auto; } .bask-select-trigger[data-popup-open] .bask-select-chevron { transform: rotate(180deg); } .bask-select-positioner { z-index: 65; } .bask-select-popup { display: flex; flex-direction: column; gap: var(--spacing-25); min-width: var(--anchor-width, 10rem); max-height: min(18rem, 60vh); overflow-y: auto; padding: var(--spacing-100); background: var(--menu-surface, hsl(var(--background))); color: hsl(var(--foreground)); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-high); outline: none; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); transform-origin: var(--transform-origin); opacity: 1; transition: opacity 120ms ease, transform 120ms ease; } .bask-select-popup[data-starting-style], .bask-select-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } .bask-select-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-base); cursor: pointer; outline: none; transition: background 120ms ease, color 120ms ease; } .bask-select-item[data-highlighted] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-select-item[data-selected] { font-weight: var(--font-weight-medium); } .bask-select-item[data-disabled] { opacity: 0.4; cursor: not-allowed; } .bask-select-check { display: inline-flex; flex: 0 0 auto; width: 0.85em; color: hsl(var(--primary)); } .bask-select-check svg { width: 100%; height: auto; } .bask-select-item-label { display: block; } .bask-select-item-desc { display: block; font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); font-weight: var(--font-weight-regular); color: hsl(var(--muted-foreground)); } @media (prefers-reduced-motion: reduce) { .bask-select-chevron, .bask-select-popup, .bask-select-item { transition: none; } .bask-select-popup[data-starting-style], .bask-select-popup[data-ending-style] { transform: none; } } .bask-toggle-group { display: flex; flex-wrap: wrap; gap: var(--spacing-100); } .bask-toggle { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); cursor: pointer; padding: var(--spacing-200) var(--spacing-300); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: hsl(var(--foreground)); background: var(--option-surface, hsl(var(--background))); border: var(--field-border-width, var(--stroke-xs)) solid var(--option-border, hsl(var(--input))); border-radius: var(--option-radius, var(--radius-lg)); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .bask-toggle:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-toggle:focus-visible { border-color: var(--focus-ring, hsl(var(--ring))); box-shadow: inset 0 0 0 var(--focus-width, var(--stroke-sm)) var(--focus-ring, hsl(var(--ring))); } .bask-toggle[data-selected="true"] { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } @media (prefers-reduced-motion: reduce) { .bask-toggle { transition: none; } } .bask-toggle-group--full { width: 100%; } .bask-toggle-group--full .bask-toggle { flex: 1 1 0; } .bask-toggle-group--segmented { flex-wrap: nowrap; gap: 0; padding: var(--spacing-25); background: hsl(var(--muted)); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: min(var(--radius-lg), 1rem); } .bask-toggle-group--segmented .bask-toggle { flex: 1 1 0; border: none; background: transparent; border-radius: calc(min(var(--radius-lg), 1rem) - var(--spacing-25)); } .bask-toggle-group--segmented .bask-toggle[data-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-low); } .bask-toggle-group--tiles { display: grid; grid-template-columns: repeat(var(--bask-choice-cols, 1), minmax(0, 1fr)); gap: var(--spacing-100); } .bask-toggle-group--tiles .bask-toggle { justify-content: flex-start; min-height: 3.5rem; padding: var(--spacing-300); border-radius: min(var(--option-radius, var(--radius-lg)), 1rem); } .bask-toggle-group--tiles .bask-toggle[data-selected="true"] { background: var(--option-selected-surface, hsl(var(--background))); border-color: var(--option-selected-border, hsl(var(--primary))); color: var(--option-selected-text, hsl(var(--foreground))); box-shadow: inset 0 0 0 var(--field-border-width, var(--stroke-xs)) var(--option-selected-border, hsl(var(--primary))); } .bask-toggle .bask-choice-img { width: 1.5em; height: 1.5em; } .bask-toggle-group--tiles .bask-toggle .bask-choice-img { width: 2.5rem; height: 2.5rem; } .bask-toggle .bask-choice-body { text-align: left; } .bask-toggle-check { display: inline-flex; width: 1em; margin-left: auto; color: hsl(var(--primary)); opacity: 0; transition: opacity 120ms ease; } .bask-toggle-check svg { width: 100%; height: auto; } .bask-toggle[data-selected="true"] .bask-toggle-check { opacity: 1; } .bask-toggle-check--box { box-sizing: border-box; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; padding: 0.15em; opacity: 1; color: transparent; background: hsl(var(--background)); border: var(--stroke-sm) solid hsl(var(--input)); border-radius: var(--radius-sm); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .bask-toggle[data-selected="true"] .bask-toggle-check--box { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } @media (prefers-reduced-motion: reduce) { .bask-toggle-check--box { transition: none; } } .bask-toggle-group--checklist .bask-toggle[data-exclusive] { grid-column: 1 / -1; } .bask-toggle-group--checklist .bask-toggle:not([data-exclusive]) + .bask-toggle[data-exclusive] { margin-top: var(--spacing-300); } .bask-toggle-group--compact .bask-toggle { min-height: 2.75rem; padding: var(--spacing-200) var(--spacing-300); } @container bask (max-width: 639px) { .bask-toggle-group--checklist { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .bask-otp { text-align: center; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.5em; text-indent: 0.5em; } .bask-otp::placeholder { letter-spacing: 0.5em; } .bask-otp-group { display: inline-flex; align-items: center; gap: var(--spacing-100); max-width: 100%; } .bask-otp-box { flex: 0 1 auto; min-width: 0; width: 2.75rem; height: 3.25rem; padding: 0; box-sizing: border-box; text-align: center; font-family: var(--font-family-body); font-size: var(--font-size-heading-04); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; color: var(--field-text, hsl(var(--foreground))); background: var(--field-surface, hsl(var(--background))); border: var(--field-border-width, var(--stroke-xs)) solid var(--field-border, hsl(var(--input))); border-radius: var(--field-radius, var(--radius-lg)); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .bask-otp-box:hover { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-otp-box:focus, .bask-otp-box:focus-visible { border-color: var(--focus-ring, hsl(var(--ring))); box-shadow: inset 0 0 0 var(--focus-width, var(--stroke-sm)) var(--focus-ring, hsl(var(--ring))); } .bask-otp-box[data-filled] { border-color: var(--focus-ring, hsl(var(--ring))); } .bask-otp-group[data-size="sm"] > .bask-otp-box { width: 2.25rem; height: 2.75rem; font-size: var(--font-size-heading-05); } .bask-otp-group[data-size="lg"] > .bask-otp-box { width: 3.25rem; height: 3.75rem; font-size: var(--font-size-heading-03); } .bask-otp-sep { color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); padding: 0 var(--spacing-25); user-select: none; } @media (prefers-reduced-motion: reduce) { .bask-otp-box { transition: none; } } .bask-phone-row { display: flex; gap: var(--spacing-100); align-items: stretch; width: 100%; } .bask-phone-row > .bask-field, .bask-phone-row > .bask-field-floatbox { flex: 1 1 auto; min-width: 0; } .bask-phone-row > .bask-phone-prefix, .bask-phone-row > .bask-phone-country { flex: 0 0 auto; } .bask-phone-country { width: calc(7.5rem * var(--bask-fs-k, 1)); } .bask-phone-prefix { width: auto; display: inline-flex; align-items: center; padding: 0 calc(var(--bask-fs-px, var(--spacing-300)) - var(--spacing-50)); color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); } .bask-phone-row:has(> .bask-field--underline) { gap: 0; } .bask-combo-trigger { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); text-align: left; cursor: pointer; white-space: nowrap; } .bask-combo-current { display: inline-flex; align-items: center; gap: var(--spacing-50); min-width: 0; } .bask-combo-current-flag { font-size: 1.1em; } .bask-combo-icon { display: inline-flex; flex: 0 0 auto; width: 0.75em; color: hsl(var(--muted-foreground)); } .bask-combo-icon svg { width: 100%; height: auto; } .bask-combo-positioner { z-index: 65; } .bask-combo-popup { display: flex; flex-direction: column; min-width: max(var(--anchor-width, 14rem), 14rem); max-width: min(92vw, 32rem); box-sizing: border-box; overflow-wrap: normal; word-break: normal; background: var(--menu-surface, hsl(var(--background))); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-high); overflow: hidden; transform-origin: var(--transform-origin); opacity: 1; transition: opacity 120ms ease, transform 120ms ease; } .bask-combo-popup[data-starting-style], .bask-combo-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } @media (prefers-reduced-motion: reduce) { .bask-combo-popup { transition: none; } .bask-combo-popup[data-starting-style], .bask-combo-popup[data-ending-style] { transform: none; } } .bask-combo-input { border: none; border-bottom: var(--stroke-xs) solid hsl(var(--border)); border-radius: 0; min-height: auto; padding: var(--spacing-200) var(--spacing-300); } .bask-combo-input:focus-visible { box-shadow: none; border-bottom-color: hsl(var(--ring)); } .bask-combo-empty { padding: var(--spacing-300); color: hsl(var(--muted-foreground)); font-size: var(--font-size-body-02); } .bask-combo-empty:empty { display: none; } .bask-combo-list { width: 100%; box-sizing: border-box; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--spacing-50); } .bask-combo-item { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-100); width: 100%; box-sizing: border-box; padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-base); cursor: default; font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); color: hsl(var(--foreground)); } .bask-combo-item[data-highlighted] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-combo-item-flag { font-size: 1.1em; } .bask-combo-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bask-combo-item-code { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; } .bask-combo-opt { display: flex; align-items: center; gap: var(--spacing-100); width: 100%; box-sizing: border-box; padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-base); cursor: default; font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); color: hsl(var(--foreground)); } .bask-combo-opt[data-highlighted] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-combo-opt-check { flex: 0 0 auto; display: inline-flex; align-items: center; width: 0.8em; color: hsl(var(--primary)); } .bask-combo-opt:not([data-selected]) .bask-combo-opt-check { visibility: hidden; } .bask-combo-opt-check svg { width: 100%; height: auto; } .bask-combo-opt-name { flex: 1 1 auto; min-width: 0; } .bask-combo-single { position: relative; display: flex; width: 100%; } .bask-combo-single > .bask-field { width: 100%; padding-right: calc(var(--spacing-700) * var(--bask-fs-k, 1)); } .bask-combo-single-icon { position: absolute; top: 50%; right: var(--bask-fs-px, var(--spacing-300)); transform: translateY(-50%); display: inline-flex; align-items: center; width: calc(0.75em * var(--bask-fs-k, 1)); padding: 0; border: none; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; } .bask-combo-single-icon svg { width: 100%; height: auto; } .bask-combo-chips-wrap { display: flex; align-items: center; width: 100%; height: auto; min-height: calc(1em + var(--bask-fs-py, var(--spacing-200)) * 2 + var(--stroke-xs) * 2); min-height: calc(1lh + var(--bask-fs-py, var(--spacing-200)) * 2 + var(--stroke-xs) * 2); padding: calc(var(--bask-fs-py, var(--spacing-200)) - var(--spacing-50)) calc(var(--bask-fs-px, var(--spacing-300)) - var(--spacing-50)); cursor: text; } .bask-combo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-50); width: 100%; } .bask-combo-chip { display: inline-flex; align-items: center; gap: var(--spacing-50); padding: var(--spacing-25) var(--spacing-50) var(--spacing-25) var(--spacing-100); border-radius: var(--radius-base); background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: var(--font-size-body-02); line-height: var(--line-height-body-03); } .bask-combo-chip-x { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; padding: 0; border: none; border-radius: var(--radius-full); background: none; color: hsl(var(--muted-foreground)); cursor: pointer; font-size: 1.1em; line-height: 1; } .bask-combo-chip-x::before { content: ""; position: absolute; inset: -10px; } .bask-combo-chip-x:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-combo-chip-field { flex: 1 1 4rem; min-width: 4rem; border: none; outline: none; background: none; color: hsl(var(--foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); } .bask-combo-chip-field::placeholder { color: hsl(var(--muted-foreground)); } .bask-med-search { display: flex; gap: var(--spacing-100); align-items: stretch; width: 100%; } .bask-med-search > .bask-field { flex: 1 1 auto; min-width: 0; } .bask-med-add, .bask-med-remove { flex: 0 0 auto; padding: 0 var(--spacing-300); border: var(--stroke-sm) solid hsl(var(--input)); border-radius: var(--radius-lg); background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); cursor: pointer; } .bask-med-add:disabled { opacity: 0.5; cursor: default; } .bask-med-add:hover:not(:disabled), .bask-med-remove:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-med-remove { padding: var(--spacing-50) var(--spacing-200); } .bask-med-list { display: flex; flex-direction: column; gap: var(--spacing-200); margin: var(--spacing-200) 0 0; padding: 0; list-style: none; } .bask-med-row { display: flex; flex-direction: column; gap: var(--spacing-100); padding: var(--spacing-200); border: var(--stroke-sm) solid hsl(var(--input)); border-radius: var(--radius-lg); background: hsl(var(--muted)); } .bask-med-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); } .bask-med-name { color: hsl(var(--foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-01); } .bask-med-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-100); } @media (max-width: 480px) { .bask-med-row-fields { grid-template-columns: 1fr; } } .bask-number-row { display: flex; gap: var(--spacing-100); align-items: stretch; } .bask-number-row > .bask-input-affix { flex: 1 1 auto; min-width: 0; } .bask-number-row input[type="number"] { appearance: textfield; -moz-appearance: textfield; } .bask-number-row input[type="number"]::-webkit-outer-spin-button, .bask-number-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bask-field-suffix { position: absolute; top: 50%; right: var(--bask-fs-px, var(--spacing-300)); transform: translateY(-50%); pointer-events: none; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: 1; } .bask-num-steppers { display: inline-flex; align-items: stretch; flex: 0 0 auto; background: hsl(var(--background)); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: var(--radius-lg); overflow: hidden; } .bask-num-stepper { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: calc(2.75em * var(--bask-fs-k, 1)); cursor: pointer; color: hsl(var(--foreground)); font-size: var(--font-size-body-01); line-height: 1; transition: background 120ms ease; } .bask-num-stepper + .bask-num-stepper { border-left: var(--stroke-xs) solid hsl(var(--input)); } .bask-num-stepper:hover { background: hsl(var(--muted)); } .bask-num-stepper:active { background: hsl(var(--accent)); } .bask-num-stepper:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } @media (prefers-reduced-motion: reduce) { .bask-num-stepper { transition: none; } } .bask-height-row { display: flex; gap: var(--spacing-200); } .bask-height-row > .bask-input-affix { flex: 1 1 0; min-width: 0; } .bask-height-row--compact > .bask-input-affix { flex: 0 0 auto; width: auto; } .bask-height-row--compact .bask-field { width: max(6.5em, 6.5rem); } .bask-height-row--compact .bask-height-cm { width: max(8em, 8rem); } @container bask (max-width: 30rem) { .bask-height-row--compact > .bask-input-affix { flex: 1 1 0; min-width: 0; } .bask-height-row--compact .bask-field { width: 100%; min-width: 0; } } .bask-height-units { display: inline-flex; align-items: stretch; align-self: stretch; flex: 0 0 auto; background: hsl(var(--background)); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: var(--radius-lg); overflow: hidden; } .bask-height-unit { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 var(--bask-fs-px, var(--spacing-300)); cursor: pointer; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: 1; transition: background 120ms ease; } .bask-height-unit + .bask-height-unit { border-left: var(--stroke-xs) solid hsl(var(--input)); } .bask-height-unit[aria-pressed="true"] { background: hsl(var(--muted)); color: hsl(var(--foreground)); } .bask-height-unit:hover { background: hsl(var(--muted)); } .bask-height-unit:active { background: hsl(var(--accent)); } .bask-height-unit:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } @media (prefers-reduced-motion: reduce) { .bask-height-unit { transition: none; } } .bask-field--compact { width: 9em; flex: 0 0 auto; } .bask-input-affix:has(> .bask-field--compact) { width: auto; flex: 0 0 auto; } .bask-address { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-address-heading { display: flex; flex-direction: column; gap: var(--spacing-100); margin-bottom: var(--spacing-200); } .bask-address-heading h3 { margin: 0; color: hsl(var(--foreground)); font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); font-size: var(--font-size-heading-03); line-height: var(--line-height-heading-03); letter-spacing: var(--letter-spacing-heading-03); } .bask-address-heading p { margin: 0; color: hsl(var(--muted-foreground)); } .bask-address-head { gap: var(--spacing-100); margin-bottom: var(--spacing-200); } .bask-form:has(:is(h2, h3, h4, h5, h6):not(.bask-address-heading *)) .bask-address-heading h3 { font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); letter-spacing: var(--letter-spacing-heading-05); } .bask-address-street { position: relative; width: 100%; } .bask-address-verify { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); } .bask-address-force { cursor: pointer; border: 0; background: transparent; padding: 0; min-height: 2.75rem; color: hsl(var(--primary)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); text-decoration: underline; } .bask-address-billing { display: flex; flex-direction: column; gap: var(--spacing-300); margin-top: var(--spacing-200); } .bask-address-billing-section { gap: var(--spacing-200); padding-top: var(--spacing-300); border-top: var(--stroke-xs) solid hsl(var(--border)); } .bask-address-billing-heading { font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); } .bask-address-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-100); } @container bask (min-width: 40rem) { .bask-address-grid { grid-template-columns: 2fr 1fr 1fr; } } .bask-address-predict { position: absolute; top: calc(100% + var(--spacing-25)); left: 0; right: 0; z-index: 55; display: flex; flex-direction: column; gap: var(--spacing-25); margin: 0; padding: var(--spacing-100); list-style: none; max-height: min(18rem, 60vh); overflow-y: auto; background: var(--menu-surface, hsl(var(--background))); color: hsl(var(--foreground)); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-high); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); } .bask-address-option { padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-base); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .bask-address-option:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-file { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-file[hidden] { display: none; } .bask-file-or { display: flex; align-items: center; gap: var(--spacing-200); font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); } .bask-file-or::before, .bask-file-or::after { content: ""; flex: 1; height: var(--stroke-xs); background: hsl(var(--border)); } .bask-file-capture { align-self: stretch; width: 100%; justify-content: center; } .bask-file--inline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--spacing-200); } .bask-file--inline > * { align-self: center; } .bask-file--inline .bask-file-capture { width: auto; } .bask-file--inline .bask-file-or { flex: 0 0 auto; } .bask-file--inline .bask-file-or::before, .bask-file--inline .bask-file-or::after { display: none; } .bask-dropzone ~ .bask-file-capture { padding: var(--spacing-300); border: var(--stroke-sm) solid hsl(var(--border)); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); font-weight: var(--font-weight-regular); } .bask-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-50); } .bask-file-chip { display: inline-flex; align-items: center; gap: var(--spacing-50); padding: var(--spacing-25) var(--spacing-100); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: var(--radius-lg); font-size: var(--font-size-body-03); } .bask-file-remove { all: unset; cursor: pointer; line-height: 1; color: hsl(var(--muted-foreground)); } .bask-file-remove:hover { color: hsl(var(--foreground)); } .bask-file-preview { all: unset; cursor: pointer; display: inline-flex; line-height: 1; color: hsl(var(--muted-foreground)); } .bask-file-preview:hover { color: hsl(var(--foreground)); } .bask-file-preview:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-file-btn { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-100); align-self: flex-start; padding: var(--spacing-200) var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--input)); border-radius: var(--radius-lg); background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); font-weight: var(--font-weight-medium); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .bask-file-btn:hover { background: hsl(var(--muted)); border-color: hsl(var(--ring)); } .bask-file-btn:focus-within { border-color: hsl(var(--ring)); box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-file-btn:has(input:disabled), .bask-file-capture:disabled { opacity: 0.6; cursor: not-allowed; } .bask-file-btn-icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: hsl(var(--muted-foreground)); } .bask-file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .bask-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-100); padding: var(--spacing-500) var(--spacing-300); border: var(--stroke-sm) dashed hsl(var(--border)); border-radius: var(--field-radius, var(--radius-lg)); background: var(--field-surface, hsl(var(--background))); text-align: center; transition: border-color 120ms ease, background 120ms ease; } .bask-dropzone:hover { border-color: var(--focus-ring, hsl(var(--ring))); background: hsl(var(--muted)); } .bask-dropzone--over { border-color: hsl(var(--primary)); border-style: solid; background: hsl(var(--accent)); } .bask-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .bask-dropzone-input:disabled { cursor: progress; } .bask-dropzone-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.75em; height: 2.75em; border-radius: var(--radius-full); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); margin-bottom: var(--spacing-50); } .bask-dropzone-badge svg, .bask-dropzone-badge .bask-file-spinner { width: 1.35em; height: 1.35em; } .bask-dropzone--over .bask-dropzone-badge { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .bask-dropzone-title { font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--foreground)); } .bask-dropzone-copy, .bask-dropzone-tpl-zone { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-100); } .bask-dropzone-tpl-zone { position: relative; z-index: 1; } .bask-dropzone-copy { font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); } .bask-dropzone-copy .bask-type:is([style*="--bfs:1em"], [style*="--bfs: 1em"]):not([style*="--bfs-"]) { line-height: inherit; } .bask-dropzone:has(> .bask-dropzone-copy) { isolation: isolate; } .bask-dropzone:has(> .bask-dropzone-copy) > .bask-dropzone-input { z-index: 1; } .bask-dropzone-copy:not(:has(> .bask-dropzone-tpl-zone)) { isolation: isolate; } .bask-dropzone > .bask-load-failed .bask-load-failed-reload { position: relative; z-index: 2; } .bask-file-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-200); } .bask-file-card { display: flex; flex-direction: column; gap: var(--spacing-50); width: 4.75rem; } .bask-file-thumb { position: relative; aspect-ratio: var(--bff-t, 1); border-radius: var(--radius-base); border: var(--stroke-xs) solid hsl(var(--border)); background: hsl(var(--muted)); overflow: hidden; } .bask-file-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .bask-file-thumb-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: hsl(var(--muted-foreground)); } .bask-file-thumb-icon svg { width: 1.6em; height: 1.6em; } .bask-file-grid .bask-file-remove, .bask-file-chip .bask-file-thumb .bask-file-remove { position: absolute; top: var(--spacing-25); right: var(--spacing-25); width: 1.4em; height: 1.4em; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-full); background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-low); font-size: var(--font-size-body-02); line-height: 1; opacity: 0.85; transition: opacity 120ms ease, background 120ms ease; } .bask-file-thumb:hover .bask-file-remove, .bask-file-remove:focus-visible { opacity: 1; } .bask-file-grid .bask-file-remove:hover, .bask-file-chip .bask-file-thumb .bask-file-remove:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); } .bask-file-grid .bask-file-preview, .bask-file-chip .bask-file-thumb .bask-file-preview, .bask-file-photo .bask-file-preview { position: absolute; top: var(--spacing-25); left: var(--spacing-25); width: 1.4em; height: 1.4em; align-items: center; justify-content: center; border-radius: var(--radius-full); background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-low); opacity: 0.85; } .bask-file-card .bask-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; } .bask-file-thumb { display: block; } .bask-file-chip .bask-file-thumb { width: 2rem; flex: 0 0 auto; } .bask-file-chip > .bask-file-tpl-zone { display: inline-flex; align-items: center; gap: var(--spacing-50); } .bask-file-card > .bask-file-tpl-zone { display: flex; flex-direction: column; gap: var(--spacing-50); } .bask-file-photo { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--spacing-200); height: var(--bff-h, 15rem); min-height: 0; aspect-ratio: var(--bff-a, auto); border: var(--stroke-sm) dashed hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--background)); } .bask-file-field { --bff-a: var(--bask-file-aspect, auto); --bff-t: var(--bask-file-thumb-aspect, 1); --bff-h: var(--bask-file-photo-h, 15rem); } @container bask (max-width: 1023px) { .bask-file-field { --bff-a: var(--bask-file-aspect-md, var(--bask-file-aspect, auto)); --bff-t: var(--bask-file-thumb-aspect-md, var(--bask-file-thumb-aspect, 1)); --bff-h: var(--bask-file-photo-h-md, var(--bask-file-photo-h, 15rem)); } } @container bask (max-width: 639px) { .bask-file-field { --bff-a: var(--bask-file-aspect-sm, var(--bask-file-aspect-md, var(--bask-file-aspect, auto))); --bff-t: var(--bask-file-thumb-aspect-sm, var(--bask-file-thumb-aspect-md, var(--bask-file-thumb-aspect, 1))); --bff-h: var(--bask-file-photo-h-sm, var(--bask-file-photo-h-md, var(--bask-file-photo-h, 15rem))); } } .bask-file--single .bask-dropzone { aspect-ratio: var(--bff-a, auto); justify-content: center; } .bask-file-photo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-base); } .bask-file-photo-name { display: inline-flex; align-items: center; gap: var(--spacing-100); font-family: var(--font-family-body); font-size: var(--font-size-body-03); color: hsl(var(--muted-foreground)); } .bask-file-photo-name svg { width: 1.2em; height: 1.2em; } .bask-file-photo-remove { position: absolute; top: var(--spacing-100); right: var(--spacing-100); display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; padding: 0; border: none; border-radius: var(--radius-full); background: hsl(var(--foreground) / 0.55); color: hsl(var(--background)); font-size: var(--font-size-body-01); line-height: 1; cursor: pointer; } .bask-file-photo-remove:hover { background: hsl(var(--foreground) / 0.8); } .bask-file-photo-remove:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-dialog-popup.bask-idv-cam { display: flex; flex-direction: column; gap: var(--spacing-300); width: min(32rem, calc(100vw - var(--spacing-600))); padding: var(--spacing-400); border-radius: var(--radius-lg); background: hsl(var(--background)); color: hsl(var(--foreground)); } .bask-dialog-popup.bask-picker-conflict, .bask-dialog-popup.bask-checkout-code, .bask-dialog-popup.bask-checkout-sign-in, .bask-dialog-popup.bask-sign-back-in { display: flex; flex-direction: column; gap: var(--spacing-300); width: min(28rem, calc(100vw - var(--spacing-600))); padding: var(--spacing-400); border-radius: var(--radius-lg); background: hsl(var(--background)); color: hsl(var(--foreground)); } .bask-dialog-popup.bask-doc-preview { display: flex; flex-direction: column; gap: var(--spacing-300); width: min(48rem, calc(100vw - var(--spacing-600))); padding: var(--spacing-400); border-radius: var(--radius-lg); background: hsl(var(--background)); color: hsl(var(--foreground)); } .bask-doc-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bask-doc-preview-stage { display: flex; align-items: center; justify-content: center; min-height: 0; overflow: auto; border-radius: var(--radius-lg); background: hsl(var(--muted)); } .bask-doc-preview-frame { display: block; width: 100%; height: 60vh; border: 0; } .bask-doc-preview-image { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; } .bask-doc-preview-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-300); min-height: 12rem; padding: var(--spacing-400); text-align: center; font-family: var(--font-family-body); font-size: var(--font-size-body-02); } .bask-doc-preview-none p { margin: 0; } .bask-doc-preview .bask-idv-cam-primary { text-decoration: none; } .bask-picker-conflict-actions { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-picker-conflict-cards { gap: var(--spacing-300); } .bask-picker-conflict-actions a { text-align: center; text-decoration: none; } .bask-picker-conflict .bask-picker-conflict-reason { color: hsl(var(--foreground)); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); } .bask-picker-conflict-hint { margin: 0; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); } .bask-picker-conflict-secondary { width: 100%; padding: var(--spacing-300) var(--spacing-500); font-family: var(--font-family-body); font-size: var(--font-size-body-01); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); background: transparent; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); cursor: pointer; text-align: center; text-decoration: none; } .bask-sign-back-in-body { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-sign-back-in .bask-rsp.bask-sign-back-in-note { padding: var(--spacing-200) var(--spacing-300); border-radius: var(--radius-lg); background: hsl(var(--primary) / 0.1); } .bask-sign-back-in-status { margin: 0; min-height: 1lh; font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-sign-back-in-status[data-invalid="true"] { color: hsl(var(--destructive)); } .bask-idv-cam-stage { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; border-radius: var(--radius-lg); background: hsl(var(--muted)); } .bask-idv-cam-video, .bask-idv-cam-still { display: block; width: 100%; height: 100%; object-fit: cover; } .bask-idv-cam-guide { position: absolute; inset: 12% 8%; border: var(--stroke-sm) dashed hsl(var(--background)); border-radius: var(--radius-lg); opacity: 0.75; pointer-events: none; } .bask-idv-cam-error { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--destructive)); } .bask-idv-cam-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-200); } .bask-idv-cam-actions > * { flex: 1 1 10rem; justify-content: center; } .bask-idv-cam-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); padding: var(--spacing-200) var(--spacing-300); border: none; border-radius: var(--radius-lg); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); font-weight: var(--font-weight-medium); cursor: pointer; } .bask-idv-cam-primary:disabled { opacity: 0.6; cursor: not-allowed; } .bask-idv-cam-primary:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-idv-photo { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-idv-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-100); } .bask-idv-link { all: unset; cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 0.15em; } .bask-idv-link:hover { color: hsl(var(--foreground)); } .bask-idv-link:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-idv-verified-body { display: flex; flex-direction: column; gap: var(--spacing-100); min-width: 0; } .bask-idv-verified-zone { display: flex; flex-direction: column; gap: var(--spacing-100); margin-top: var(--spacing-300); } .bask-calendar { display: flex; flex-direction: column; gap: var(--spacing-200); padding: var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-lg); width: 100%; box-sizing: border-box; font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); } .bask-calendar[data-size="sm"] { max-width: 16rem; } .bask-calendar[data-size="md"] { max-width: 21rem; } .bask-calendar[data-size="lg"] { max-width: 23rem; } .bask-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); font-weight: var(--font-weight-medium); } .bask-calendar-nav { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: var(--radius-lg); font-size: var(--font-size-body-01); color: hsl(var(--foreground)); transition: background 120ms ease; } .bask-calendar-nav svg { width: 0.7em; height: auto; } .bask-calendar-nav:hover { background: hsl(var(--muted)); } .bask-calendar-nav:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--spacing-50); } .bask-calendar-weekday { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-body-03); line-height: 1; letter-spacing: var(--letter-spacing-body-03); font-weight: var(--font-weight-medium); color: hsl(var(--muted-foreground)); padding-bottom: var(--spacing-50); } .bask-calendar-day { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-base); font-size: var(--font-size-body-02); line-height: 1; cursor: pointer; color: hsl(var(--foreground)); transition: background 120ms ease, color 120ms ease; } .bask-calendar-day:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-calendar-day:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-calendar-day[data-today] { font-weight: var(--font-weight-medium); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--ring)); } .bask-calendar-day[data-selected] { background: var(--bask-cal-accent, hsl(var(--primary))); color: hsl(var(--primary-foreground)); font-weight: var(--font-weight-medium); box-shadow: none; } .bask-calendar-day[disabled] { color: hsl(var(--muted-foreground)); opacity: 0.5; cursor: not-allowed; pointer-events: none; } .bask-calendar-title { all: unset; box-sizing: border-box; cursor: pointer; font-weight: var(--font-weight-medium); padding: var(--spacing-50) var(--spacing-100); border-radius: var(--radius-lg); transition: background 120ms ease; } .bask-calendar-title:hover { background: hsl(var(--muted)); } .bask-calendar-title:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-calendar-panel { display: grid; gap: var(--spacing-100); } .bask-calendar-panel--months { grid-template-columns: repeat(3, 1fr); } .bask-calendar-panel--years { grid-template-columns: repeat(4, 1fr); } .bask-calendar-cell { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; padding: var(--spacing-100); border-radius: var(--radius-base); font-size: var(--font-size-body-02); line-height: 1; cursor: pointer; color: hsl(var(--foreground)); transition: background 120ms ease, color 120ms ease; } .bask-calendar-cell:hover { background: hsl(var(--muted)); } .bask-calendar-cell:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-calendar-cell[data-today] { font-weight: var(--font-weight-medium); box-shadow: inset 0 0 0 var(--stroke-xs) hsl(var(--ring)); } .bask-calendar-cell[data-selected] { background: var(--bask-cal-accent, hsl(var(--primary))); color: hsl(var(--primary-foreground)); font-weight: var(--font-weight-medium); box-shadow: none; } .bask-calendar-cell[data-selected]:hover { background: var(--bask-cal-accent, hsl(var(--primary))); } .bask-calendar-cell[disabled] { color: hsl(var(--muted-foreground)); opacity: 0.5; cursor: not-allowed; pointer-events: none; } .bask-date-field { display: flex; align-items: center; gap: var(--spacing-100); cursor: text; } .bask-date-field:focus-within { border-color: hsl(var(--ring)); box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-field--filled.bask-date-field:focus-within, .bask-field--underline.bask-date-field:focus-within { box-shadow: none; border-color: transparent; border-bottom-color: hsl(var(--ring)); } .bask-date-input { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; transition: opacity 120ms ease; } .bask-field-floatbox:not(:focus-within):not(:has(.bask-date-segment:not(:placeholder-shown))):not(:has(.bask-date-calendar-btn[data-popup-open])) .bask-date-input { opacity: 0; } .bask-date-part { display: inline-flex; align-items: center; } .bask-date-segment { all: unset; display: inline-block; box-sizing: content-box; width: 3.6ch; padding: 0 var(--spacing-25); border-radius: var(--radius-sm); text-align: center; font: inherit; color: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; cursor: text; } .bask-date-segment[data-segment="year"] { width: 5.8ch; } .bask-date-segment::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; } .bask-date-segment:focus { background: hsl(var(--muted)); } .bask-date-sep { color: hsl(var(--muted-foreground)); padding: 0 var(--spacing-25); } .bask-date-calendar-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: calc(1.75em * var(--bask-fs-k, 1)); height: calc(1.75em * var(--bask-fs-k, 1)); margin-block: calc(var(--spacing-100) * -1); margin-inline-end: calc(var(--spacing-100) * -1); border-radius: var(--radius-lg); color: hsl(var(--muted-foreground)); transition: background 120ms ease, color 120ms ease; } .bask-date-calendar-btn svg { width: 1em; height: auto; } .bask-date-calendar-btn:hover, .bask-date-calendar-btn[data-popup-open] { background: hsl(var(--muted)); color: hsl(var(--foreground)); } .bask-date-calendar-btn:focus-visible { box-shadow: inset 0 0 0 var(--stroke-sm) hsl(var(--ring)); } .bask-date-positioner { z-index: 65; } .bask-date-popup { width: 18rem; max-width: 92vw; background: var(--menu-surface, hsl(var(--background))); box-shadow: var(--shadow-high); transform-origin: var(--transform-origin); opacity: 1; transition: opacity 120ms ease, transform 120ms ease; } .bask-date-popup[data-starting-style], .bask-date-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } .bask-date-jump { display: flex; flex: 1 1 auto; min-width: 0; gap: var(--spacing-100); } .bask-date-jump-select { flex: 1 1 0; min-width: 0; min-height: 0; padding: var(--spacing-100) var(--spacing-600) var(--spacing-100) var(--spacing-200); background-position: right var(--spacing-200) center; font-weight: var(--font-weight-medium); } .bask-date-dropdowns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-100); } .bask-date-dropdowns > *:first-child { grid-column: 1 / -1; } @container bask (min-width: 40rem) { .bask-date-dropdowns { grid-template-columns: 1.4fr 1fr 1.2fr; } .bask-date-dropdowns > *:first-child { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .bask-date-input, .bask-date-calendar-btn, .bask-date-popup { transition: none; } .bask-date-popup[data-starting-style], .bask-date-popup[data-ending-style] { transform: none; } } .bask-calendar-skeleton { min-height: 17rem; } @media (prefers-reduced-motion: reduce) { .bask-calendar-nav, .bask-calendar-day, .bask-calendar-cell, .bask-calendar-title { transition: none; } } .bask-button { transition: opacity 120ms ease; } .bask-button:hover { opacity: var(--btn-hover-opacity, 0.8); } .bask-button[data-variant="default"]:hover { --bask-btn-hover-fill: var(--btn-default-hover-fill); --bask-btn-hover-text: var(--btn-default-hover-text); --bask-btn-hover-underline: var(--btn-default-hover-underline); } .bask-button[data-variant="secondary"]:hover { --bask-btn-hover-fill: var(--btn-secondary-hover-fill); --bask-btn-hover-text: var(--btn-secondary-hover-text); --bask-btn-hover-underline: var(--btn-secondary-hover-underline); } .bask-button[data-variant="outline"]:hover { --bask-btn-hover-fill: var(--btn-outline-hover-fill); --bask-btn-hover-text: var(--btn-outline-hover-text); --bask-btn-hover-underline: var(--btn-outline-hover-underline); } .bask-button[data-variant="ghost"]:hover { --bask-btn-hover-fill: var(--btn-ghost-hover-fill); --bask-btn-hover-text: var(--btn-ghost-hover-text); --bask-btn-hover-underline: var(--btn-ghost-hover-underline); } .bask-button[data-variant="link"]:hover { --bask-btn-hover-fill: var(--btn-link-hover-fill); --bask-btn-hover-text: var(--btn-link-hover-text); --bask-btn-hover-underline: var(--btn-link-hover-underline); } .bask-button[data-variant="destructive"]:hover { --bask-btn-hover-fill: var(--btn-destructive-hover-fill); --bask-btn-hover-text: var(--btn-destructive-hover-text); --bask-btn-hover-underline: var(--btn-destructive-hover-underline); } .bask-button:focus-visible { outline: var(--stroke-sm) solid var(--focus-ring, hsl(var(--ring))); outline-offset: 2px; } .bask-button__content { display: inline-flex; align-items: center; gap: inherit; } .bask-button[aria-busy="true"] { position: relative; cursor: progress; } .bask-button[aria-busy="true"] > .bask-button__content { visibility: hidden; } .bask-button__spinner { position: absolute; inset: 0; margin: auto; } .bask-button.bask-profile-signout[aria-disabled="true"], .bask-button.bask-profile-signout[aria-disabled="true"]:hover { opacity: var(--btn-disabled-opacity, 0.6); cursor: progress; } .bask-profile-skeleton { width: fit-content; max-width: 100%; color: transparent !important; background: hsl(var(--muted)); border-radius: min(var(--radius-lg), 0.5rem); } .bask-profile-skeleton * { color: transparent !important; } .bask-profile-reveal { animation: bask-profile-reveal 180ms ease-out; } @keyframes bask-profile-reveal { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bask-profile-reveal { animation: none; } } .bask-form[aria-busy="true"] .bask-button { pointer-events: none; opacity: var(--btn-disabled-opacity, 0.6); cursor: progress; } .bask-form { display: block; align-self: stretch; } .bask-otp-claim { display: flex; flex-direction: column; gap: var(--spacing-300); width: 100%; align-self: stretch; } .bask-otp-claim__subtitle { font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--muted-foreground)); margin: 0; } .bask-otp-claim__field { display: flex; flex-direction: column; gap: var(--spacing-200); width: 100%; } .bask-otp-claim__field > span { font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); } .bask-otp-claim__field > small { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-otp-claim__field > input, .bask-otp-claim__field > .bask-phone-row > input { width: 100%; box-sizing: border-box; padding: var(--spacing-300) var(--spacing-400); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); } .bask-otp-claim__field > input:focus-visible, .bask-otp-claim__field > .bask-phone-row > input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-color: hsl(var(--ring)); } .bask-otp-claim__field > input:disabled, .bask-otp-claim__field > .bask-phone-row > input:disabled { opacity: 0.6; cursor: not-allowed; } .bask-otp-claim__field > .bask-phone-row > input { flex: 1 1 auto; min-width: 0; width: auto; } .bask-otp-claim__field > .bask-otp-group { align-self: center; } .bask-otp-claim__field > .bask-phone-row > .bask-phone-prefix { box-sizing: border-box; padding: var(--spacing-300) var(--spacing-400); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); } .bask-otp-claim__sent, .bask-otp-claim__error { font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); margin: 0; } .bask-otp-claim__sent { color: hsl(var(--muted-foreground)); } .bask-otp-claim__sent[data-follow-align] .bask-type.bask-align { text-align: inherit; } .bask-otp-claim__error { color: hsl(var(--destructive)); } .bask-otp-claim__submit { width: 100%; padding: var(--spacing-300) var(--spacing-500); font-family: var(--font-family-body); font-size: var(--font-size-body-01); font-weight: var(--font-weight-medium); color: var(--btn-default-text, hsl(var(--primary-foreground))); background: var(--btn-default-fill, hsl(var(--primary))); border: var(--btn-default-border-width, 0px) var(--btn-default-border-style, none) var(--btn-default-border, transparent); border-radius: var(--btn-default-radius, var(--radius-lg)); cursor: pointer; } .bask-otp-claim__submit:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: not-allowed; } .bask-otp-claim__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-400); justify-content: center; margin: 0; } .bask-otp-claim__action { padding: 0; font-family: var(--font-family-body); font-size: var(--font-size-body-03); color: hsl(var(--muted-foreground)); background: none; border: 0; text-decoration: underline; cursor: pointer; } .bask-otp-claim__action:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: not-allowed; text-decoration: none; } .bask-auth { display: flex; flex-direction: column; gap: var(--spacing-400); width: 100%; align-self: stretch; text-align: start; } .bask-pharmacy { display: flex; flex-direction: column; gap: var(--spacing-300); width: 100%; text-align: start; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-pharmacy-choice { display: flex; flex-direction: column; gap: var(--spacing-300); width: 100%; text-align: start; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-pharmacy-choice__head { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-pharmacy-choice__ribbon { align-self: flex-start; margin: 0; padding: 2px 8px; border: 1px dashed #d97706; border-radius: var(--radius-lg); color: #b45309; font: 11px system-ui, sans-serif; pointer-events: none; } .bask-pharmacy__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-400); } .bask-pharmacy__search { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-lab-collection, .bask-lab-scheduling { width: 100%; align-self: stretch; } .bask-lab { display: flex; flex-direction: column; gap: var(--spacing-400); width: 100%; text-align: start; font-family: var(--font-family-body); color: hsl(var(--foreground)); } .bask-lab__head { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-lab__zip, .bask-lab__address-form, .bask-lab__section, .bask-lab__method, .bask-lab__days { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-lab__method { gap: var(--spacing-200); } .bask-lab__method-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-300); } .bask-lab__address-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-300); } @container bask (max-width: 479px) { .bask-lab__address-row { grid-template-columns: minmax(0, 1fr); } } .bask-lab__day { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-lab__location { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-lab__location[data-highlighted] .bask-choice-tile { border-color: var(--option-selected-border, hsl(var(--primary))); box-shadow: inset 0 0 0 var(--field-border-width, var(--stroke-xs)) var(--option-selected-border, hsl(var(--primary))); } .bask-lab__map { position: relative; height: 13rem; overflow: hidden; background: hsl(var(--muted)); border: var(--stroke-sm) solid hsl(var(--border)); border-radius: min(var(--radius-lg), 1rem); } .bask-lab__map-frame { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 200ms ease; } .bask-lab__map[data-ready] .bask-lab__map-frame { opacity: 1; } .bask-lab__map-zoom { position: absolute; right: var(--spacing-300); bottom: var(--spacing-300); display: flex; flex-direction: column; overflow: hidden; background: hsl(var(--background)); border: var(--stroke-sm) solid hsl(var(--border)); border-radius: var(--radius-sm); } .bask-lab__map-button { width: 2rem; height: 2rem; padding: 0; font-size: var(--font-size-body-01); line-height: 1; color: hsl(var(--foreground)); background: transparent; border: 0; cursor: pointer; } .bask-lab__map-button + .bask-lab__map-button { border-top: var(--stroke-sm) solid hsl(var(--border)); } .bask-lab__map-button:hover { background: hsl(var(--muted)); } .bask-lab__map-button:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .bask-lab__map-frame { transition: none; } } .bask-lab__method-name, .bask-lab__label, .bask-lab__day-label { font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); margin: 0; } .bask-lab__option-name { font-weight: var(--font-weight-medium); } .bask-lab__price { flex: 0 0 auto; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); white-space: nowrap; } .bask-lab__callout { padding: var(--spacing-300); font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--foreground)); background: hsl(var(--muted)); border-radius: min(var(--radius-lg), 1rem); margin: 0; } .bask-lab__link { align-self: flex-start; font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 3px; } .bask-lab__link:hover { color: hsl(var(--primary)); } .bask-auth__title, .bask-lab__title { font-family: var(--font-family-heading); font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); letter-spacing: var(--letter-spacing-heading-05); font-weight: var(--font-weight-bold); color: hsl(var(--foreground)); margin: 0; } .bask-auth__title { font-size: var(--font-size-heading-03); line-height: var(--line-height-heading-03); letter-spacing: var(--letter-spacing-heading-03); } .bask-auth__subtitle, .bask-lab__subtitle { font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: hsl(var(--muted-foreground)); margin: 0; } .bask-auth__password { position: relative; display: flex; align-items: center; width: 100%; } .bask-auth__password > .bask-field { width: 100%; padding-inline-end: calc(var(--spacing-500) * 2); } .bask-auth__reveal { position: absolute; inset-inline-end: var(--spacing-300); padding: 0; font-family: var(--font-family-body); font-size: var(--font-size-body-03); color: hsl(var(--muted-foreground)); background: none; border: 0; cursor: pointer; } .bask-auth__reveal::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 2.75rem); height: max(100%, 2.75rem); transform: translate(-50%, -50%); } .bask-auth__reveal:disabled { opacity: 0.5; cursor: not-allowed; } .bask-auth__reveal:focus-visible, .bask-auth__link:focus-visible, .bask-pharmacy__link:focus-visible, .bask-lab__skip:focus-visible, .bask-lab__link:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); } .bask-auth__submit:focus-visible, .bask-pharmacy__search-button:focus-visible, .bask-lab__submit:focus-visible, .bask-lab__secondary:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-auth__submit, .bask-lab__submit { width: 100%; padding: var(--spacing-300) var(--spacing-500); font-family: var(--font-family-body); font-size: var(--font-size-body-01); font-weight: var(--font-weight-medium); color: var(--btn-default-text, hsl(var(--primary-foreground))); background: var(--btn-default-fill, hsl(var(--primary))); border: var(--btn-default-border-width, 0px) var(--btn-default-border-style, none) var(--btn-default-border, transparent); border-radius: var(--btn-default-radius, var(--radius-lg)); cursor: pointer; } .bask-auth__submit:disabled, .bask-pharmacy__search-button:disabled, .bask-lab__submit:disabled, .bask-lab__secondary:disabled { opacity: 0.5; cursor: not-allowed; } .bask-auth__options { display: flex; flex-wrap: wrap; gap: var(--spacing-300) var(--spacing-500); justify-content: flex-start; margin: var(--spacing-200) 0 0; } .bask-auth__link, .bask-pharmacy__link, .bask-lab__skip { padding: 0; font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .bask-auth__link:hover, .bask-pharmacy__link:hover, .bask-lab__skip:hover { color: hsl(var(--primary)); } .bask-lab__skip { align-self: center; } .bask-auth__link:disabled, .bask-pharmacy__link:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; } .bask-auth__link:disabled:hover, .bask-pharmacy__link:disabled:hover { color: hsl(var(--foreground)); } .bask-auth__error { font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--destructive)); margin: 0; } .bask-auth__sent, .bask-pharmacy__note, .bask-lab__note { font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); margin: 0; } .bask-auth__sent[data-follow-align] .bask-type.bask-align { text-align: inherit; } .bask-auth__social { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-auth__social-button, .bask-pharmacy__search-button, .bask-lab__secondary { display: flex; align-items: center; justify-content: center; gap: var(--spacing-300); width: 100%; padding: var(--spacing-300) var(--spacing-500); font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); font-weight: var(--font-weight-medium); color: var(--btn-outline-text, hsl(var(--foreground))); background: var(--btn-outline-fill, hsl(var(--background))); border: var(--stroke-sm) solid hsl(var(--border)); border-radius: var(--btn-outline-radius, var(--radius-lg)); text-decoration: none; cursor: pointer; } .bask-auth__social-button > svg { flex: 0 0 auto; } .bask-auth__social-button:hover, .bask-pharmacy__search-button:hover:not(:disabled), .bask-lab__secondary:hover:not(:disabled) { background: hsl(var(--muted)); } .bask-auth__social-button:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-auth__social-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .bask-auth__social-button[aria-disabled="true"]:hover { background: var(--btn-outline-fill, hsl(var(--background))); } .bask-auth__social-note { font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); text-align: center; margin: 0; } .bask-auth__divider { display: flex; align-items: center; gap: var(--spacing-300); font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-auth__divider::before, .bask-auth__divider::after { content: ""; flex: 1 1 auto; border-top: var(--stroke-sm) solid hsl(var(--border)); } .bask-clinical-assessment { display: flex; flex-direction: column; gap: var(--spacing-400); width: 100%; align-self: stretch; } .bask-clinical-assessment-title { margin: 0; font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-heading-03); line-height: var(--line-height-heading-03); letter-spacing: var(--letter-spacing-heading-03); text-wrap: balance; text-align: start; color: hsl(var(--foreground)); } .bask-clinical-assessment-progress { margin-top: calc(-1 * var(--spacing-300)); text-align: start; font-variant-numeric: tabular-nums; font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); } .bask-clinical-inapplicable { border: 0; padding: 0; margin: 0; min-width: 0; opacity: 0.45; pointer-events: none; transition: opacity 150ms ease; } .bask-clinical-asked { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-clinical-asked[data-every-path] > :not(.bask-clinical-asked__note) { opacity: 0.45; } .bask-clinical-asked__note { align-self: flex-start; margin: 0; padding: 2px 8px; border: 1px dashed #d97706; border-radius: var(--radius-lg); color: #b45309; font: 11px system-ui, sans-serif; cursor: help; } .bask-clinical-assessment-placeholder { font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--muted-foreground)); } .bask-clinical-skel { display: flex; flex-direction: column; gap: var(--spacing-300); } .bask-clinical-skel > span { display: block; background: hsl(var(--muted)); border-radius: var(--radius-base); height: var(--spacing-400); animation-duration: 1.6s; } .bask-clinical-skel > span:nth-child(1) { width: 55%; height: var(--spacing-700); } .bask-clinical-skel > span:nth-child(2) { width: 80%; } .bask-clinical-skel > span:nth-child(3), .bask-clinical-skel > span:nth-child(4) { width: 100%; height: var(--spacing-900); border-radius: var(--radius-lg); } .bask-clinical-skel > span:nth-child(5) { width: 100%; height: var(--spacing-900); border-radius: var(--radius-lg); margin-top: var(--spacing-300); } .bask-clinical-assessment-back { display: inline-flex; align-items: center; gap: var(--spacing-100); background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); } .bask-clinical-assessment-back:hover { color: hsl(var(--foreground)); } .bask-root:has(.bask-flow-progress-back) .bask-clinical-assessment-back { display: none; } .bask-clinical-assessment button[type="submit"] { width: 100%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: var(--btn-default-border-width, 0px) var(--btn-default-border-style, none) var(--btn-default-border, transparent); border-radius: var(--btn-default-radius, var(--radius-lg)); padding: var(--spacing-300) var(--spacing-400); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); background: var(--btn-default-fill, hsl(var(--primary))); color: var(--btn-default-text, hsl(var(--primary-foreground))); } .bask-clinical-assessment button[type="submit"][aria-busy="true"] { gap: var(--spacing-200); cursor: progress; } .bask-flow-back { align-self: flex-start; padding-left: 0 !important; padding-right: 0 !important; } .bask-rsp.bask-flow-back { margin-bottom: var(--spacing-400); } .bask-field-error { font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); letter-spacing: var(--letter-spacing-body-03); color: hsl(var(--destructive)); } .bask-dialog-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); cursor: pointer; } .bask-dialog-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.5); } .bask-dialog-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60; width: min(92%, 32rem); max-height: 85vh; overflow-y: auto; gap: var(--spacing-300); border: var(--stroke-xs) solid hsl(var(--border)); box-shadow: var(--shadow-high); outline: none; } .bask-dialog-title { margin: 0; font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); letter-spacing: var(--letter-spacing-heading-05); } .bask-dialog-desc { margin: 0; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); } .bask-dialog-close { all: unset; position: absolute; top: var(--spacing-300); right: var(--spacing-300); cursor: pointer; line-height: 1; font-size: 1.25rem; color: hsl(var(--muted-foreground)); } .bask-tooltip-popup { max-width: 16rem; padding: var(--spacing-100) var(--spacing-200); font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); box-shadow: var(--shadow-mid); z-index: 65; } .bask-popover-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); cursor: pointer; } .bask-popover-popup { min-width: 12rem; max-width: min(92vw, 24rem); max-height: 85vh; overflow-y: auto; border: var(--stroke-xs) solid hsl(var(--border)); box-shadow: var(--shadow-high); outline: none; z-index: 65; } .bask-lang-trigger { display: inline-flex; align-items: center; gap: 0.4em; padding: var(--spacing-100) var(--spacing-200); background: transparent; border: none; border-radius: var(--radius-base); white-space: nowrap; cursor: pointer; transition: background 120ms ease; } .bask-lang-trigger:hover, .bask-lang-trigger[data-popup-open] { background: color-mix(in srgb, currentColor 12%, transparent); } .bask-lang-trigger:focus-visible { outline: var(--stroke-sm) solid currentColor; outline-offset: 2px; } .bask-lang-trigger-zone { display: inline-flex; align-items: center; gap: inherit; min-width: 0; } .bask-lang-positioner, .bask-menu-positioner, .bask-overlay-positioner { z-index: 65; } .bask-lang-popup { min-width: 11rem; max-width: min(92vw, 20rem); max-height: 70vh; overflow-y: auto; border: var(--stroke-xs) solid hsl(var(--border)); outline: none; z-index: 65; transform-origin: var(--transform-origin); transition: opacity 120ms ease, transform 120ms ease; } .bask-lang-popup[data-starting-style], .bask-lang-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } .bask-lang-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300); padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-base); white-space: nowrap; cursor: pointer; outline: none; transition: background 120ms ease, color 120ms ease; } .bask-lang-item[data-highlighted] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .bask-lang-item-zone { display: flex; align-items: center; justify-content: space-between; gap: inherit; flex: 1; min-width: 0; } .bask-lang-hint-anchor { display: inline-flex; } .bask-lang-hint { background: hsl(var(--foreground)); color: hsl(var(--background)); border-radius: var(--radius-base); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); letter-spacing: normal; } @media (prefers-reduced-motion: reduce) { .bask-lang-trigger, .bask-lang-popup, .bask-lang-item { transition: none; } } .bask-profile-menu-trigger { display: inline-flex; align-items: center; gap: var(--spacing-100); padding: var(--spacing-50); background: transparent; border: none; border-radius: var(--radius-full); color: inherit; cursor: pointer; transition: background 120ms ease; } .bask-profile-menu-trigger:hover, .bask-profile-menu-trigger[data-popup-open] { background: color-mix(in srgb, currentColor 12%, transparent); } .bask-profile-menu-trigger:focus-visible { outline: var(--stroke-sm) solid currentColor; outline-offset: 2px; } .bask-profile-menu-trigger:disabled { cursor: progress; } .bask-profile-menu-trigger-zone { display: inline-flex; align-items: center; gap: inherit; min-width: 0; } .bask-profile-menu-positioner { z-index: 55; } .bask-profile-menu-popup { display: flex; flex-direction: column; gap: var(--spacing-300); width: max-content; min-width: 15rem; max-width: min(92vw, 20rem); border: var(--stroke-xs) solid hsl(var(--border)); outline: none; z-index: 55; font-family: var(--font-family-body); transform-origin: var(--transform-origin); transition: opacity 120ms ease, transform 120ms ease; } .bask-profile-menu-popup[data-starting-style], .bask-profile-menu-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } .bask-profile-menu-panel-zone { display: flex; flex-direction: column; gap: inherit; min-width: 0; } @media (prefers-reduced-motion: reduce) { .bask-profile-menu-trigger, .bask-profile-menu-popup { transition: none; } } .bask-drawer-trigger { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); cursor: pointer; } .bask-drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.5); opacity: 1; transition: opacity var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-drawer-scrim[data-starting-style], .bask-drawer-scrim[data-ending-style] { opacity: 0; } .bask-drawer-popup { position: fixed; z-index: 60; gap: var(--spacing-300); max-width: 100%; max-height: 100%; overflow: auto; border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--bask-drawer-radius, 0); box-shadow: var(--shadow-high); outline: none; transition: transform var(--motion-duration-normal, 300ms) var(--motion-easing-out, cubic-bezier(0, 0, 0.2, 1)); } .bask-drawer-popup[data-side="right"] { top: 0; right: 0; bottom: 0; width: min(92vw, 24rem); border-top-right-radius: 0; border-bottom-right-radius: 0; } .bask-drawer-popup[data-side="left"] { top: 0; left: 0; bottom: 0; width: min(92vw, 24rem); border-top-left-radius: 0; border-bottom-left-radius: 0; } .bask-drawer-popup[data-side="top"] { top: 0; left: 0; right: 0; max-height: 85vh; border-top-left-radius: 0; border-top-right-radius: 0; } .bask-drawer-popup[data-side="bottom"] { bottom: 0; left: 0; right: 0; max-height: 85vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .bask-drawer-popup[data-side="right"][data-starting-style], .bask-drawer-popup[data-side="right"][data-ending-style] { transform: translateX(100%); } .bask-drawer-popup[data-side="left"][data-starting-style], .bask-drawer-popup[data-side="left"][data-ending-style] { transform: translateX(-100%); } .bask-drawer-popup[data-side="top"][data-starting-style], .bask-drawer-popup[data-side="top"][data-ending-style] { transform: translateY(-100%); } .bask-drawer-popup[data-side="bottom"][data-starting-style], .bask-drawer-popup[data-side="bottom"][data-ending-style] { transform: translateY(100%); } .bask-drawer-title { margin: 0; font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); letter-spacing: var(--letter-spacing-heading-05); } .bask-drawer-desc { margin: 0; color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); } .bask-drawer-close { all: unset; position: absolute; top: var(--spacing-300); right: var(--spacing-300); cursor: pointer; line-height: 1; font-size: 1.25rem; color: hsl(var(--muted-foreground)); } .bask-drawer-close[data-position="top-start"] { right: auto; inset-inline-start: var(--spacing-300); } @container bask (min-width: 1024px) { .bask-drawer-popup.bask-drawer--panel:is([data-side="left"], [data-side="right"]) { width: min(92vw, 24rem); } .bask-drawer-popup.bask-drawer--panel:is([data-side="top"], [data-side="bottom"]) { min-height: 0; max-height: 85vh; } .bask-drawer-popup.bask-drawer--sheet:is([data-side="left"], [data-side="right"]) { width: min(100%, max(24rem, 50%)); } .bask-drawer-popup.bask-drawer--sheet:is([data-side="top"], [data-side="bottom"]) { min-height: 50vh; max-height: 92vh; } .bask-drawer-popup.bask-drawer--full { border: none; border-radius: 0; box-shadow: none; } .bask-drawer-popup.bask-drawer--full:is([data-side="left"], [data-side="right"]) { width: 100%; } .bask-drawer-popup.bask-drawer--full:is([data-side="top"], [data-side="bottom"]) { min-height: 100%; max-height: 100%; } } @container bask (min-width: 640px) and (max-width: 1023px) { .bask-drawer-popup.bask-drawer--panel-md:is([data-side="left"], [data-side="right"]) { width: min(92vw, 24rem); } .bask-drawer-popup.bask-drawer--panel-md:is([data-side="top"], [data-side="bottom"]) { min-height: 0; max-height: 85vh; } .bask-drawer-popup.bask-drawer--sheet-md:is([data-side="left"], [data-side="right"]) { width: min(100%, max(24rem, 50%)); } .bask-drawer-popup.bask-drawer--sheet-md:is([data-side="top"], [data-side="bottom"]) { min-height: 50vh; max-height: 92vh; } .bask-drawer-popup.bask-drawer--full-md { border: none; border-radius: 0; box-shadow: none; } .bask-drawer-popup.bask-drawer--full-md:is([data-side="left"], [data-side="right"]) { width: 100%; } .bask-drawer-popup.bask-drawer--full-md:is([data-side="top"], [data-side="bottom"]) { min-height: 100%; max-height: 100%; } } @container bask (max-width: 639px) { .bask-drawer-popup.bask-drawer--panel-sm:is([data-side="left"], [data-side="right"]) { width: min(92vw, 24rem); } .bask-drawer-popup.bask-drawer--panel-sm:is([data-side="top"], [data-side="bottom"]) { min-height: 0; max-height: 85vh; } .bask-drawer-popup.bask-drawer--sheet-sm:is([data-side="left"], [data-side="right"]) { width: min(100%, max(24rem, 50%)); } .bask-drawer-popup.bask-drawer--sheet-sm:is([data-side="top"], [data-side="bottom"]) { min-height: 50vh; max-height: 92vh; } .bask-drawer-popup.bask-drawer--full-sm { border: none; border-radius: 0; box-shadow: none; } .bask-drawer-popup.bask-drawer--full-sm:is([data-side="left"], [data-side="right"]) { width: 100%; } .bask-drawer-popup.bask-drawer--full-sm:is([data-side="top"], [data-side="bottom"]) { min-height: 100%; max-height: 100%; } } @media (prefers-reduced-motion: reduce) { .bask-drawer-popup, .bask-drawer-scrim { transition: none; } .bask-drawer-popup[data-starting-style], .bask-drawer-popup[data-ending-style] { transform: none; } } .bask-alert-dialog-actions { display: flex; justify-content: flex-end; gap: var(--spacing-200); flex-wrap: wrap; } .bask-menu-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-100); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); cursor: pointer; } .bask-menu-popup { display: flex; flex-direction: column; gap: var(--spacing-50); min-width: 10rem; max-width: min(92vw, 20rem); max-height: 85vh; overflow-y: auto; border: var(--stroke-xs) solid hsl(var(--border)); box-shadow: var(--shadow-high); outline: none; z-index: 65; transform-origin: var(--transform-origin); opacity: 1; transition: opacity 120ms ease, transform 120ms ease; } .bask-menu-popup[data-starting-style], .bask-menu-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } .bask-menu-popup > * { display: flex; align-items: center; width: 100%; padding: var(--spacing-100) var(--spacing-200); border-radius: var(--radius-base); cursor: pointer; transition: background 120ms ease; } .bask-menu-popup > *:hover, .bask-menu-popup > *:focus-within { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } @media (prefers-reduced-motion: reduce) { .bask-menu-popup, .bask-menu-popup > * { transition: none; } .bask-menu-popup[data-starting-style], .bask-menu-popup[data-ending-style] { transform: none; } } .bask-menu-panel { gap: var(--spacing-50); } .bask-menu-panel > * { padding: 0; border-radius: 0; background: none; color: inherit; cursor: default; } .bask-menu-panel > *:hover, .bask-menu-panel > *:focus-within { background: none; color: inherit; } .bask-menu-item { transition: background 120ms ease; text-decoration: none; cursor: pointer; } .bask-menu-item:hover, .bask-menu-item:focus-visible { background: color-mix(in srgb, currentColor 6%, transparent); } @media (prefers-reduced-motion: reduce) { .bask-menu-item { transition: none; } } .bask-header-row { max-width: var(--hdr-mw, none); } .bask-header-bar { display: flex; } .bask-header-mbar { display: none; } .bask-header-bar > :first-child, .bask-header-mbar > :first-child { margin-inline-end: auto; } .bask-header .bask-header-menu-panel { display: none; flex-basis: 100%; width: 100%; padding-top: var(--spacing-300); } .bask-header-menu-panel .bask-menu-acc { align-self: stretch; } .bask-header-menu-panel .bask-menu-acc-trigger { min-height: 48px; padding: 0 !important; background: transparent !important; border: none !important; color: inherit !important; font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); text-align: start; } .bask-header-menu-panel .bask-menu-acc-panel { padding: 0 0 var(--spacing-200) var(--spacing-300); } .bask-header-menu-panel .bask-language-picker { align-self: flex-start; } .bask-root:not(.bask-root--authoring) .bask-header-menu-panel hr:is(:first-child, :last-child), .bask-root:not(.bask-root--authoring) .bask-header-menu-panel hr + hr { display: none; } .bask-header-menu-panel .bask-lang-trigger { min-height: 48px; margin-inline-start: calc(var(--spacing-200) * -1); } .bask-menu-glyph-open, .bask-menu-glyph-close { display: inline-flex; } .bask-menu-glyph-close, .bask-header[data-menu-open="true"] .bask-menu-glyph-open { display: none; } .bask-header[data-menu-open="true"] .bask-menu-glyph-close { display: inline-flex; } .bask-menu-glyph-open.bask-menu-glyph--flow { display: contents; } .bask-menu-glyph-close.bask-menu-glyph--flow, .bask-header[data-menu-open="true"] .bask-menu-glyph-open.bask-menu-glyph--flow { display: none; } .bask-header[data-menu-open="true"] .bask-menu-glyph-close.bask-menu-glyph--flow { display: contents; } .bask-theme-switch { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .bask-theme-switch--sm { font-size: 0.875rem; } .bask-theme-switch--md { font-size: 1rem; } .bask-theme-switch--lg { font-size: 1.25rem; } .bask-theme-switch:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: var(--spacing-50); } .bask-theme-switch svg { flex: none; width: 1.25em; height: 1.25em; } .bask-theme-switch--icon { width: 2.75em; height: 2.75em; border-radius: var(--radius-full); background: var(--bask-theme-switch-fill, transparent); } .bask-theme-switch--icon .bask-theme-switch__to-light, .bask-root.dark .bask-theme-switch--icon .bask-theme-switch__to-dark { display: none; } .bask-root.dark .bask-theme-switch--icon .bask-theme-switch__to-light { display: block; } .bask-theme-switch--switch { border-radius: var(--radius-full); background: transparent; } .bask-theme-switch__track { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; width: 3.75em; height: 2em; padding: 0.1875em; border-radius: var(--radius-full); background: var(--bask-theme-switch-fill, hsl(var(--muted))); } .bask-theme-switch__thumb { position: absolute; top: 0.1875em; inset-inline-start: 0.1875em; width: calc(50% - 0.1875em); height: calc(100% - 0.375em); border-radius: var(--radius-full); background: var(--bask-theme-switch-thumb, hsl(var(--background))); box-shadow: var(--shadow-low); transition: transform 180ms ease; } .bask-root.dark .bask-theme-switch__thumb { transform: translateX(100%); } .bask-root.dark .bask-theme-switch__thumb:dir(rtl) { transform: translateX(-100%); } .bask-theme-switch__end { position: relative; display: inline-flex; align-items: center; justify-content: center; opacity: 0.55; transition: opacity 180ms ease; } .bask-theme-switch__end svg { width: 1em; height: 1em; } .bask-root:not(.dark) .bask-theme-switch__end--light, .bask-root.dark .bask-theme-switch__end--dark { opacity: 1; } @media (prefers-reduced-motion: reduce) { .bask-theme-switch__thumb, .bask-theme-switch__end { transition: none; } } .bask-root:not(.bask-root--authoring):not([data-bask-color-mode-key]) .bask-theme-switch { display: none; } .bask-cart__line { display: flex; flex-direction: column; } .bask-load-failed { padding: 1em; text-align: center; color: hsl(var(--muted-foreground)); } .bask-load-failed-reload { padding: 0; border: 0; background: none; font: inherit; color: hsl(var(--foreground)); text-decoration: underline; cursor: pointer; } @container bask (max-width: 1023px) { .bask-header-bar { display: none; } .bask-header-mbar { display: flex; } .bask-header[data-menu-open="true"] .bask-header-menu-panel { display: flex; } } .bask-root:not(.bask-root--authoring) .bask-button--menu:not(.bask-header .bask-button--menu) { display: none !important; } .bask-menu-acc { display: flex; flex-direction: column; width: 100%; } .bask-menu-acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-100); background: none; border: none; cursor: pointer; color: inherit; font-family: var(--font-family-body); font-weight: var(--font-weight-medium); } .bask-menu-acc-caret { transition: transform 160ms ease; display: inline-flex; } .bask-menu-acc[data-open="true"] .bask-menu-acc-caret { transform: rotate(180deg); } .bask-menu-acc-panel { display: none; padding-top: var(--spacing-100); } .bask-menu-acc[data-open="true"] .bask-menu-acc-panel { display: block; } @media (prefers-reduced-motion: reduce) { .bask-menu-acc-caret { transition: none; } } .bask-header[data-scroll="float-pill"] { transition: background-color 260ms var(--motion-easing-out, ease), box-shadow 260ms var(--motion-easing-out, ease), border-color 260ms var(--motion-easing-out, ease); } .bask-header[data-scroll="float-pill"] .bask-header-row { transition: background-color 260ms var(--motion-easing-out, ease), border-color 260ms var(--motion-easing-out, ease), box-shadow 260ms var(--motion-easing-out, ease), border-radius 260ms var(--motion-easing-out, ease), max-width 260ms var(--motion-easing-out, ease), margin-top 260ms var(--motion-easing-out, ease); } .bask-header[data-scroll="float-pill"][data-scrolled="true"] { background-color: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; } .bask-header[data-scroll="float-pill"][data-scrolled="true"] .bask-header-row { max-width: fit-content; margin-top: var(--hdr-s-top, var(--spacing-300)); background-color: var(--hdr-s-bg, transparent); border-style: solid; border-width: var(--hdr-s-bw, 0); border-color: var(--hdr-s-bc, transparent); border-radius: var(--hdr-s-radius, 9999px); box-shadow: var(--hdr-s-shadow, none); } @media (prefers-reduced-motion: reduce) { .bask-header[data-scroll="float-pill"], .bask-header[data-scroll="float-pill"] .bask-header-row { transition: none; } } @container bask (max-width: 1023px) { .bask-header[data-scroll="float-pill"][data-scrolled="true"] .bask-header-row { max-width: calc(100% - 2 * var(--spacing-500)); border-radius: var(--radius-xl); } } @container bask (max-width: 1023px) { .bask-header:not([data-menu-style="fullscreen"], [data-scrolled="true"])[data-menu-open="true"] { background-color: var(--hdr-menu-bg, var(--hdr-bg, transparent)) !important; background-repeat: no-repeat; background-size: 100% var(--hdr-h, 100%); } .bask-header[data-menu-style="fullscreen"]:is([data-menu-open="true"], [data-menu-closing="true"]) { min-height: var(--hdr-h, 0px); } .bask-header[data-menu-style="fullscreen"]:is([data-menu-open="true"], [data-menu-closing="true"]) .bask-header-row { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 100vh; height: 100dvh; max-width: none; margin: 0; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; background-color: var(--hdr-menu-bg, var(--hdr-bg, hsl(var(--background)))); background-image: var(--hdr-bg-img, none); background-repeat: no-repeat; background-size: 100% var(--hdr-h, 100%); border-width: 0; border-radius: 0; box-shadow: none; transition: none; } .bask-header[data-menu-style="fullscreen"]:is([data-menu-open="true"], [data-menu-closing="true"]) .bask-header-mbar { flex: none; } .bask-header[data-menu-settling="true"], .bask-header[data-menu-settling="true"] .bask-header-row { transition: none !important; } .bask-header[data-menu-style="fullscreen"][data-menu-closing="true"] .bask-header-menu-panel { display: flex; } .bask-header[data-menu-style="fullscreen"]:is([data-menu-open="true"], [data-menu-closing="true"]) .bask-header-menu-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; padding-bottom: max(var(--spacing-500), env(safe-area-inset-bottom)); animation: bask-header-menu-in 200ms var(--motion-easing-out, ease) both; } .bask-header[data-menu-style="fullscreen"][data-menu-closing="true"] .bask-header-menu-panel { animation-name: bask-header-menu-out; pointer-events: none; } .bask-header[data-menu-style="fullscreen"] .bask-header-menu-panel > * { flex-shrink: 0; } .bask-header[data-menu-style="fullscreen"] .bask-header-menu-panel > :first-child { margin-bottom: auto; } .bask-header[data-canvas][data-menu-style="fullscreen"][data-menu-open="true"] { position: relative; z-index: 50; } .bask-header[data-canvas][data-menu-style="fullscreen"][data-menu-open="true"] .bask-header-row { position: absolute; height: auto; min-height: min(844px, 100vh); } .bask-header[data-canvas][data-menu-style="fullscreen"][data-menu-open="true"] .bask-header-menu-panel { padding-bottom: calc(var(--spacing-500) + 88px); } } @container bask (min-width: 600px) and (max-width: 1023px) { .bask-header[data-canvas][data-menu-style="fullscreen"][data-menu-open="true"] .bask-header-row { min-height: min(1024px, 100vh); } } @keyframes bask-header-menu-in { from { opacity: 0; transform: translateY(-8px); } } @keyframes bask-header-menu-out { to { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .bask-header .bask-header-menu-panel { animation: none !important; } } .bask-hovercard-trigger { display: inline; font-family: var(--font-family-body); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: var(--stroke-xs); cursor: pointer; } .bask-hovercard-trigger:hover, .bask-hovercard-trigger[data-popup-open] { text-decoration-thickness: var(--stroke-sm); } .bask-hovercard-popup { position: relative; min-width: 14rem; max-width: min(92vw, 22rem); max-height: 85vh; overflow-y: auto; border: var(--stroke-xs) solid hsl(var(--border)); box-shadow: var(--shadow-high); outline: none; z-index: 65; transform-origin: var(--transform-origin); opacity: 0; transform: scale(0.96); transition: opacity 160ms ease, transform 160ms ease; } .bask-hovercard-popup[data-open] { opacity: 1; transform: scale(1); } .bask-hovercard-popup[data-ending-style] { opacity: 0; transform: scale(0.96); } .bask-hovercard-arrow { display: flex; width: 0.75rem; height: 0.75rem; background: inherit; border-left: var(--stroke-xs) solid hsl(var(--border)); border-top: var(--stroke-xs) solid hsl(var(--border)); } .bask-hovercard-arrow[data-side="top"] { bottom: -0.375rem; transform: rotate(225deg); } .bask-hovercard-arrow[data-side="bottom"] { top: -0.375rem; transform: rotate(45deg); } .bask-hovercard-arrow[data-side="left"] { right: -0.375rem; transform: rotate(135deg); } .bask-hovercard-arrow[data-side="right"] { left: -0.375rem; transform: rotate(315deg); } @media (prefers-reduced-motion: reduce) { .bask-hovercard-popup { transition: none; } } .bask-tabs { display: flex; flex-direction: column; } .bask-tabs-list { display: flex; align-items: center; gap: var(--spacing-100); flex-wrap: wrap; } .bask-tabs--align-center .bask-tabs-list { justify-content: center; } .bask-tabs--align-stretch .bask-tabs-tab { flex: 1 1 0; } .bask-tabs-tab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-family-body); font-weight: var(--font-weight-medium); color: hsl(var(--muted-foreground)); transition: color 120ms ease, background 120ms ease, border-color 120ms ease; } .bask-tabs-tab[data-active] { color: var(--bask-tab-active); } .bask-tabs-tab:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-tabs-panel { padding-top: var(--spacing-300); } .bask-tabs-panel-editlabel { font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); letter-spacing: var(--letter-spacing-body-03); color: var(--bask-tab-active); text-transform: uppercase; padding-bottom: var(--spacing-100); } .bask-tabs--underline .bask-tabs-list { gap: var(--spacing-300); border-bottom: var(--stroke-xs) solid hsl(var(--border)); } .bask-tabs--underline .bask-tabs-tab { border-bottom: var(--stroke-sm) solid transparent; } .bask-tabs--underline .bask-tabs-tab[data-active] { border-bottom-color: var(--bask-tab-active); } .bask-tabs--pills .bask-tabs-tab { border-radius: var(--radius-full); } .bask-tabs--pills .bask-tabs-tab[data-active] { background: var(--bask-tab-active); color: var(--bask-tab-active-fg); } .bask-tabs--enclosed .bask-tabs-list { gap: var(--spacing-50); } .bask-tabs--enclosed .bask-tabs-tab { border: var(--stroke-xs) solid transparent; border-radius: var(--radius-base); } .bask-tabs--enclosed .bask-tabs-tab[data-active] { background: hsl(var(--card)); border-color: hsl(var(--border)); color: var(--bask-tab-active); } .bask-tab-orphan { display: flex; flex-direction: column; gap: var(--spacing-100); } .bask-tab-orphan-label { font-family: var(--font-family-body); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); } .bask-accordion { color: var(--bask-accordion-fg); } .bask-accordion-item { background: var(--bask-accordion-bg); } .bask-accordion-trigger { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); padding: var(--spacing-300); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); letter-spacing: var(--letter-spacing-body-01); color: var(--bask-accordion-fg); } .bask-accordion-trigger:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: -2px; } .bask-accordion-label { text-align: left; } .bask-accordion-chevron { flex: none; transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease); } .bask-accordion-item[data-open="true"] .bask-accordion-chevron:not(.bask-disclosure-swap) { transform: rotate(180deg); } .bask-accordion-panel { color: var(--bask-accordion-fg); display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-accordion-item[data-open="true"] .bask-accordion-panel { grid-template-rows: 1fr; } .bask-accordion-panel-inner { overflow: hidden; min-height: 0; } .bask-accordion-panel-body { padding: 0 var(--spacing-300) var(--spacing-300); } .bask-accordion--bordered { display: flex; flex-direction: column; gap: var(--stroke-xs); background: var(--bask-accordion-border); border: var(--stroke-xs) solid var(--bask-accordion-border); border-radius: var(--bask-accordion-radius); overflow: hidden; } .bask-accordion--separated { display: flex; flex-direction: column; gap: var(--spacing-200); } .bask-accordion--separated .bask-accordion-item { border: var(--stroke-xs) solid var(--bask-accordion-border); border-radius: var(--bask-accordion-radius); overflow: hidden; } .bask-accordion--plain { display: flex; flex-direction: column; gap: var(--stroke-xs); background: var(--bask-accordion-border); } .bask-collapsible-trigger { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-200); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); } .bask-collapsible-trigger:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: -2px; } .bask-collapsible-label { text-align: left; } .bask-collapsible-chevron { flex: none; transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease); } .bask-collapsible[data-open="true"] .bask-collapsible-chevron:not(.bask-disclosure-swap) { transform: rotate(180deg); } .bask-collapsible-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-collapsible[data-open="true"] .bask-collapsible-content { grid-template-rows: 1fr; } .bask-collapsible-content-inner { overflow: hidden; min-height: 0; } @media (prefers-reduced-motion: reduce) { .bask-accordion-panel, .bask-accordion-chevron, .bask-collapsible-content, .bask-collapsible-chevron { transition: none; } } .bask-if-branch { display: grid; grid-template-rows: 1fr; opacity: 1; } .bask-if-branch[data-open="false"] { grid-template-rows: 0fr; opacity: 0; pointer-events: none; } .bask-if-branch-inner { min-height: 0; overflow: hidden; } .bask-if-branch[data-open="true"] .bask-if-branch-inner { overflow: visible; } .bask-if-branch[data-open="true"][data-mounted="true"][data-transition="collapse"] .bask-if-branch-inner { animation: bask-if-clip var(--motion-duration-normal, 300ms) step-end; } .bask-if-branch[data-mounted="true"][data-transition="collapse"] { transition: grid-template-rows var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease), opacity var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-if-branch[data-mounted="true"][data-transition="fade"] { transition: opacity var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-if-branch[data-mounted="true"][data-duration="fast"] { transition-duration: var(--motion-duration-fast, 150ms); } .bask-if-branch[data-transition="none"] { transition: none; } @keyframes bask-if-clip { from { overflow: hidden; } to { overflow: visible; } } .bask-if-edit-branch [data-puck-dropzone]:empty::after { content: "Drop questions or blocks here"; display: flex; align-items: center; justify-content: center; min-height: inherit; color: #9ca3af; font: 12px/1.4 system-ui, sans-serif; } .bask-if-slot:not(:has(> .bask-if-branch[data-open="true"])) { margin-top: calc(-1 * var(--bg, 0px)); } .bask-if-slot--animate { transition: margin-top var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-if-slot--animate.bask-if-slot--fast { transition-duration: var(--motion-duration-fast, 150ms); } @container bask (max-width: 1023px) { .bask-if-slot:not(:has(> .bask-if-branch[data-open="true"])) { margin-top: calc(-1 * var(--bg-md, var(--bg, 0px))); } } @container bask (max-width: 639px) { .bask-if-slot:not(:has(> .bask-if-branch[data-open="true"])) { margin-top: calc(-1 * var(--bg-sm, var(--bg-md, var(--bg, 0px)))); } } @media (prefers-reduced-motion: reduce) { .bask-if-branch, .bask-if-slot { transition: none !important; } .bask-if-branch .bask-if-branch-inner { animation: none !important; } } .bask-prod-acc-summary { all: unset; box-sizing: border-box; width: 100%; } .bask-prod-acc-summary:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: -2px; } .bask-prod-acc-chevron { transition: transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease); } .bask-prod-acc-row[data-open="true"] .bask-prod-acc-chevron:not(.bask-disclosure-swap) { transform: rotate(180deg); } .bask-disclosure--start > :is(.bask-accordion-label, .bask-collapsible-label, .bask-prod-acc-title) { flex: 1 1 auto; min-width: 0; } .bask-prod-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-duration-normal, 300ms) var(--motion-easing-standard, ease); } .bask-prod-acc-row[data-open="true"] .bask-prod-acc-panel { grid-template-rows: 1fr; } .bask-prod-acc-panel-inner { overflow: hidden; min-height: 0; } @media (prefers-reduced-motion: reduce) { .bask-prod-acc-panel, .bask-prod-acc-chevron { transition: none; } } .bask-carousel-root { display: flex; flex-direction: column; width: 100%; min-width: 0; max-width: 100%; --bask-cpv: var(--bask-carousel-per-view, 1); } .bask-carousel-viewport { display: flex; gap: var(--bask-carousel-gap, 0px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; min-width: 0; padding-inline: var(--bask-carousel-peek, 0px); scroll-padding-inline: var(--bask-carousel-peek, 0px); scrollbar-width: none; -ms-overflow-style: none; } .bask-carousel-viewport::-webkit-scrollbar { display: none; } .bask-carousel-slide { flex: 0 0 calc((100% - (var(--bask-cpv, 1) - 1) * var(--bask-carousel-gap, 0px)) / var(--bask-cpv, 1)); min-width: 0; scroll-snap-align: start; } .bask-carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--spacing-200); margin-top: var(--spacing-200); padding-inline: var(--spacing-200); min-width: 0; } .bask-carousel-arrow { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: var(--bask-cas, 2.25rem); height: var(--bask-cas, 2.25rem); flex: 0 0 auto; aspect-ratio: 1; font-size: calc(var(--bask-cas, 2.25rem) * 5 / 9); color: var(--bask-carousel-arrow, hsl(var(--foreground))); background: hsl(var(--background)); border: var(--stroke-xs) solid hsl(var(--border)); border-radius: var(--radius-full); box-shadow: var(--shadow-low); transition: background 120ms ease, opacity 120ms ease; } .bask-carousel-arrow:hover { background: hsl(var(--muted)); } .bask-carousel-arrow:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; } .bask-carousel-arrow[data-disabled] { opacity: 0.35; cursor: default; pointer-events: none; } .bask-carousel-dots { display: flex; align-items: center; justify-content: center; gap: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; } .bask-carousel-dot { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 1.5rem; height: 1.5rem; } .bask-carousel-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem; transform: translate(-50%, -50%); border-radius: var(--radius-full); background: hsl(var(--muted-foreground) / 0.4); transition: background 120ms ease; } .bask-carousel-dot[data-active]::after { background: var(--bask-carousel-indicator, hsl(var(--primary))); } .bask-carousel-dot:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-full); } .bask-carousel-root[data-editing] { counter-reset: bask-slide; } .bask-carousel-root[data-editing] .bask-carousel-viewport { flex-direction: column; gap: var(--spacing-300); overflow: visible; scroll-snap-type: none; } .bask-carousel-root[data-editing] .bask-carousel-slide { flex: none; outline: var(--stroke-xs) dashed hsl(var(--border)); } .bask-carousel-root[data-editing] .bask-carousel-slide::before { counter-increment: bask-slide; content: "Slide " counter(bask-slide); display: block; font-family: var(--font-family-body); font-size: var(--font-size-body-03); line-height: var(--line-height-body-03); color: hsl(var(--muted-foreground)); padding: var(--spacing-100) var(--spacing-200); } .bask-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .bask-carousel-viewport { scroll-behavior: auto; } } .bask-carousel-root { --bask-cas: var(--bask-carousel-arrow-size, 2.25rem); } @property --bcar-page { syntax: "<length>"; inherits: true; initial-value: 0px; } .bask-carousel-root[data-bleed] { --bcar-bs-r: var(--bcar-bs, 0); --bcar-be-r: var(--bcar-be, 0); --bcar-page: 100cqw; } @container bask (max-width: 1023px) { .bask-carousel-root { --bask-cpv: var(--bask-carousel-per-view-md, var(--bask-carousel-per-view, 1)); } .bask-carousel-root { --bask-cas: var(--bask-carousel-arrow-size-md, var(--bask-carousel-arrow-size, 2.25rem)); } .bask-carousel-root[data-bleed] { --bcar-bs-r: var(--bcar-bs-md, var(--bcar-bs, 0)); --bcar-be-r: var(--bcar-be-md, var(--bcar-be, 0)); } } @container bask (max-width: 639px) { .bask-carousel-root { --bask-cpv: var(--bask-carousel-per-view-sm, var(--bask-carousel-per-view-md, var(--bask-carousel-per-view, 1))); } .bask-carousel-root { --bask-cas: var(--bask-carousel-arrow-size-sm, var(--bask-carousel-arrow-size-md, var(--bask-carousel-arrow-size, 2.25rem))); } .bask-carousel-root[data-bleed] { --bcar-bs-r: var(--bcar-bs-sm, var(--bcar-bs-md, var(--bcar-bs, 0))); --bcar-be-r: var(--bcar-be-sm, var(--bcar-be-md, var(--bcar-be, 0))); } } .bask-carousel-root[data-bleed] .bask-carousel-stage { container-type: inline-size; } .bask-carousel-root[data-bleed]:not([data-transition="fade"], [data-editing]) .bask-carousel-viewport { --bcar-bleed-s: calc(var(--bcar-bs-r) * var(--bask-carousel-bleed-s, (var(--bcar-page) - 100cqw) / 2)); --bcar-bleed-e: calc(var(--bcar-be-r) * var(--bask-carousel-bleed-e, (var(--bcar-page) - 100cqw) / 2)); margin-inline-start: calc(-1 * var(--bcar-bleed-s)); margin-inline-end: calc(-1 * var(--bcar-bleed-e)); padding-inline-start: calc(var(--bask-carousel-peek, 0px) + var(--bcar-bleed-s)); padding-inline-end: calc(var(--bask-carousel-peek, 0px) + var(--bcar-bleed-e)); scroll-padding-inline-start: calc(var(--bask-carousel-peek, 0px) + var(--bcar-bleed-s)); scroll-padding-inline-end: calc(var(--bask-carousel-peek, 0px) + var(--bcar-bleed-e)); } .bask-carousel-stage { position: relative; min-width: 0; } .bask-carousel-controls[data-align="start"] { justify-content: flex-start; } .bask-carousel-controls[data-align="end"] { justify-content: flex-end; } .bask-carousel-root[data-arrow-placement="sides"] .bask-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .bask-carousel-root[data-arrow-placement="sides"] .bask-carousel-arrow--prev { left: var(--spacing-100); } .bask-carousel-root[data-arrow-placement="sides"] .bask-carousel-arrow--next { right: var(--spacing-100); } .bask-carousel-root[data-arrow-variant="solid"] .bask-carousel-arrow { background: var(--bask-carousel-arrow-fill, hsl(var(--foreground))); border-color: transparent; box-shadow: none; } .bask-carousel-root[data-arrow-variant="solid"] .bask-carousel-arrow:hover { background: var(--bask-carousel-arrow-fill, hsl(var(--foreground))); opacity: 0.9; } .bask-carousel-root[data-arrow-variant="solid"] .bask-carousel-arrow[data-disabled] { opacity: 1; background: hsl(var(--background)); border-color: var(--bask-carousel-arrow-fill, hsl(var(--foreground))); color: var(--bask-carousel-arrow-fill, hsl(var(--foreground))); } .bask-carousel-progress { position: relative; flex: 1 1 auto; min-width: 3rem; max-width: 14rem; height: 0.25rem; background: hsl(var(--muted-foreground) / 0.2); border-radius: var(--radius-full); overflow: hidden; } .bask-carousel-progress[data-interactive] { cursor: pointer; height: 0.375rem; touch-action: none; } .bask-carousel-progress-fill { height: 100%; border-radius: inherit; background: var(--bask-carousel-indicator, hsl(var(--primary))); transition: width var(--bask-carousel-duration, 300ms) ease; } .bask-carousel-root[data-transition="fade"] .bask-carousel-viewport { display: grid; overflow: visible; scroll-snap-type: none; padding-inline: 0; } .bask-carousel-root[data-transition="fade"] .bask-carousel-slide { grid-area: 1 / 1; flex: none; width: 100%; opacity: 0; pointer-events: none; transition: opacity var(--bask-carousel-duration, 300ms) ease; } .bask-carousel-root[data-transition="fade"] .bask-carousel-slide[data-active] { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .bask-carousel-root[data-transition="fade"] .bask-carousel-slide { transition: none; } .bask-carousel-progress-fill { transition: none; } } @keyframes bask-spin { to { transform: rotate(360deg); } } .bask-spin { animation-name: bask-spin; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes bask-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .bask-skeleton { animation-name: bask-skeleton-pulse; animation-iteration-count: infinite; animation-timing-function: var(--motion-easing-standard); } @media (prefers-reduced-motion: reduce) { .bask-spin, .bask-skeleton { animation: none; } .bask-skeleton { opacity: 0.7; } } @keyframes bask-progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } .bask-progress-indeterminate { animation: bask-progress-indeterminate 1.4s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .bask-progress-indeterminate { animation: none; transform: none; width: 100% !important; } } .bask-wr-word { display: inline-block; white-space: nowrap; } .bask-rotate { display: inline-grid; vertical-align: baseline; align-items: baseline; } .bask-wr-reserve { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; pointer-events: none; } .bask-wr--slide-up .bask-wr-word:not(.bask-wr-exit) { animation: bask-wr-slide-up var(--motion-duration-normal, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; } .bask-wr--slide-up .bask-wr-exit { animation: bask-wr-slide-down var(--motion-duration-normal, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; } .bask-wr--fade .bask-wr-word:not(.bask-wr-exit) { animation: bask-wr-fade var(--motion-duration-normal, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; } .bask-wr--fade .bask-wr-exit { animation: bask-wr-fade-out var(--motion-duration-normal, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes bask-wr-slide-up { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } } @keyframes bask-wr-slide-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-0.35em); } } @keyframes bask-wr-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes bask-wr-fade-out { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bask-wr-word, .bask-wr-exit { animation: none; } } .bask-marquee { display: flex; width: 100%; overflow: hidden; } .bask-marquee[data-fade="true"] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .bask-marquee-track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; flex: 0 0 auto; animation: bask-marquee-scroll var(--bask-marquee-duration, 25s) linear infinite; animation-direction: var(--bask-marquee-dir, normal); } .bask-marquee-group { display: flex; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; } .bask-marquee[data-pause="true"]:hover .bask-marquee-track { animation-play-state: paused; } @keyframes bask-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .bask-marquee-track { animation: none; } } .bask-marquee[data-editing="true"] { overflow-x: visible; } .bask-marquee[data-editing="true"] .bask-marquee-track { animation: none; width: auto; flex: 0 1 auto; } .bask-marquee[data-editing="true"] .bask-marquee-group { flex-wrap: wrap; flex: 0 1 auto; } .bask-steps-stack > *, .bask-steps-stack > :where([data-brick-nested]) > * { width: 100%; } .bask-sticky-stack > *, .bask-sticky-stack > :where([data-brick-nested]) > * { position: sticky; top: calc(var(--bstk-top, var(--spacing-600)) + var(--bstk-i, 0) * var(--bstk-step, 0px)); } .bask-sticky-stack > :nth-child(1) { --bstk-i: 0; } .bask-sticky-stack > :nth-child(2) { --bstk-i: 1; } .bask-sticky-stack > :nth-child(3) { --bstk-i: 2; } .bask-sticky-stack > :nth-child(4) { --bstk-i: 3; } .bask-sticky-stack > :nth-child(5) { --bstk-i: 4; } .bask-sticky-stack > :nth-child(6) { --bstk-i: 5; } .bask-sticky-stack > :nth-child(7) { --bstk-i: 6; } .bask-sticky-stack > :nth-child(n + 8) { --bstk-i: 7; } @media (prefers-reduced-motion: reduce) { .bask-sticky-stack > *, .bask-sticky-stack > :where([data-brick-nested]) > * { position: static; } } .bask-reveal { transition-property: opacity, transform; transition-duration: var(--bask-reveal-dur, 500ms); transition-timing-function: var(--motion-easing-out, cubic-bezier(0, 0, 0.2, 1)); transition-delay: var(--bask-reveal-delay, 0ms); } .bask-reveal[data-revealed="false"] { opacity: 0; } .bask-reveal--slide-up[data-revealed="false"] { transform: translateY(1.5rem); } .bask-reveal--slide-down[data-revealed="false"] { transform: translateY(-1.5rem); } .bask-reveal--slide-left[data-revealed="false"] { transform: translateX(1.5rem); } .bask-reveal--slide-right[data-revealed="false"] { transform: translateX(-1.5rem); } .bask-reveal--zoom[data-revealed="false"] { transform: scale(0.94); } .bask-reveal[data-editing="true"] { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .bask-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } .bask-lift { transition: transform 180ms ease, box-shadow 180ms ease; will-change: transform; } .bask-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-high); } @media (prefers-reduced-motion: reduce) { .bask-lift { transition: none; } .bask-lift:hover { transform: none; } } .bask-hover-lift { transition: transform 180ms ease, box-shadow 180ms ease; will-change: transform; } .bask-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-high); } .bask-hover-zoom { transition: transform 220ms ease; will-change: transform; } .bask-hover-zoom:hover { transform: scale(1.03); } .bask-hover-glow { transition: box-shadow 220ms ease, filter 220ms ease; } .bask-hover-glow:hover { box-shadow: var(--shadow-high); filter: brightness(1.04); } @media (prefers-reduced-motion: reduce) { .bask-hover-lift, .bask-hover-zoom, .bask-hover-glow { transition: none; } .bask-hover-lift:hover, .bask-hover-zoom:hover { transform: none; } .bask-hover-glow:hover { filter: none; } } .bask-img-swap { position: relative; display: block; overflow: hidden; } .bask-pos.bask-img-swap { position: var(--bpos, relative); } .bask-pos.bask-decor-ambient { position: var(--bpos, absolute); z-index: var(--bz, -1); } .bask-img-swap-base { display: block; width: 100%; height: 100%; } .bask-img-swap-hover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--bask-img-swap-dur, 400ms) ease, transform var(--bask-img-swap-dur, 400ms) ease; } .bask-img-swap:hover .bask-img-swap-hover, .bask-img-swap:focus-within .bask-img-swap-hover { opacity: 1; } .bask-img-swap--zoom .bask-img-swap-hover { transform: scale(1.05); } .bask-img-swap--zoom:hover .bask-img-swap-hover, .bask-img-swap--zoom:focus-within .bask-img-swap-hover { transform: scale(1); } .bask-img-swap--instant .bask-img-swap-hover { transition: none; } .bask-img-swap--show-hover .bask-img-swap-hover { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bask-img-swap-hover { transition: none; } } .bask-rsp { --bp-t: initial; --bp-b: initial; --bp-l: initial; --bp-r: initial; --bm-t: initial; --bm-b: initial; --bm-l: initial; --bm-r: initial; --bg: initial; --bp-t-md: initial; --bp-b-md: initial; --bp-l-md: initial; --bp-r-md: initial; --bm-t-md: initial; --bm-b-md: initial; --bm-l-md: initial; --bm-r-md: initial; --bg-md: initial; --bp-t-sm: initial; --bp-b-sm: initial; --bp-l-sm: initial; --bp-r-sm: initial; --bm-t-sm: initial; --bm-b-sm: initial; --bm-l-sm: initial; --bm-r-sm: initial; --bg-sm: initial; --b-mh: initial; --b-mh-md: initial; --b-mh-sm: initial; --bmw-cx: initial; padding-top: var(--bp-t); padding-bottom: var(--bp-b); padding-left: var(--bp-l); padding-right: var(--bp-r); margin-top: var(--bm-t); margin-bottom: var(--bm-b); margin-left: var(--bm-l, var(--bmw-cx)); margin-right: var(--bm-r, var(--bmw-cx)); gap: var(--bg); min-height: var(--b-mh); } .bask-flex--row > .bask-rsp { margin-left: var(--bm-l, 0px); margin-right: var(--bm-r, 0px); } :is(.bask-flex--row, .bask-card--row):has(> .bask-media):has(> .bask-flex):not(:has(> :nth-child(3))) > :not(.bask-size:not(.bask-media)), :is(.bask-flex--row, .bask-card--row):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):not(:has(> :nth-child(3))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 1 1 0; min-width: 0; } .bask-bgvideo-host:is(.bask-flex--row, .bask-card--row):has(> .bask-media):has(> .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > :not(.bask-size:not(.bask-media)), .bask-bgvideo-host:is(.bask-flex--row, .bask-card--row):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 1 1 0; min-width: 0; } .bask-measure { --bmw: initial; --bmw-base: initial; padding-left: max(var(--bp-l, 0px), calc((var(--bmw-base, 100%) - var(--bmw, 100%)) / 2)); padding-right: max(var(--bp-r, 0px), calc((var(--bmw-base, 100%) - var(--bmw, 100%)) / 2)); } .bask-stack { display: flex; flex-direction: column; } .bask-grid { --bgc: initial; --bgc-md: initial; --bgc-sm: initial; display: grid; grid-template-columns: repeat(var(--bgc, 1), minmax(0, 1fr)); } .bask-product-list-cell { container-type: inline-size; display: grid; grid-template-rows: 1fr; } .bask-grid--trail { grid-template-columns: repeat(var(--bgl, 1), minmax(0, 1fr)) var(--bgt); } .bask-grid--rev-lg > :last-child { order: -1; } .bask-grid--divided { --bgd-w: initial; --bgd-w-md: initial; --bgd-w-sm: initial; --bgd-wr: var(--bgd-w, 0px); --bgd-gr: var(--bg, 0px); overflow: clip; } .bask-grid--divided > * { position: relative; } .bask-grid--divided > .bask-pos { position: var(--bpos, relative); } .bask-grid--divided > *::after { content: ""; position: absolute; pointer-events: none; inset-block-start: calc((var(--bgd-gr) + var(--bgd-wr)) / -2); inset-inline-start: calc((var(--bgd-gr) + var(--bgd-wr)) / -2); inset-block-end: calc(var(--bgd-gr) / -2); inset-inline-end: calc(var(--bgd-gr) / -2); border-block-start: var(--bgd-wr) solid var(--bgd-c, hsl(var(--border))); border-inline-start: var(--bgd-wr) solid var(--bgd-c, hsl(var(--border))); } .bask-flex { --bfd: initial; --bfa: initial; --bfj: initial; --bfw: initial; --bfd-md: initial; --bfa-md: initial; --bfj-md: initial; --bfw-md: initial; --bfd-sm: initial; --bfa-sm: initial; --bfj-sm: initial; --bfw-sm: initial; display: flex; flex-direction: var(--bfd, row); align-items: var(--bfa, stretch); justify-content: var(--bfj, flex-start); flex-wrap: var(--bfw, nowrap); } .bask-type { font-size: var(--bfs); line-height: var(--blh); letter-spacing: var(--bls); } .bask-align { text-align: var(--bta); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align="left"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align="left"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: flex-start; align-items: flex-start; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align="left"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align="left"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, 0); margin-right: var(--bm-r, auto); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align="center"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align="center"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: center; align-items: center; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align="center"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align="center"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, auto); margin-right: var(--bm-r, auto); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align="right"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align="right"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: flex-end; align-items: flex-end; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align="right"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align="right"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, auto); margin-right: var(--bm-r, 0); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align="left"]) > .bask-align { text-align: left; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align="left"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align="left"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, 0); margin-right: var(--bm-r, auto); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align="center"]) > .bask-align { text-align: center; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align="center"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align="center"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, auto); margin-right: var(--bm-r, auto); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align="right"]) > .bask-align { text-align: right; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align="right"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align="right"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, auto); margin-right: var(--bm-r, 0); } .bask-root--flow-step .bask-body-inner :not([class*="--row"]) > :is(.bask-flex--col, .bask-card--col, .bask-grid)[style*="--bmw-cx"]:not(.bask-flow-wide *, .bask-flow-full *), .bask-root--flow-step .bask-body-inner :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]) > :is(.bask-flex--col, .bask-card--col, .bask-grid)[style*="--bmw-cx"]:not(.bask-flow-wide *, .bask-flow-full *) { max-width: none !important; --bmw-cx: 0px !important; } .bask-root--flow-step :not([class*="--row"]) > .bask-badge:has(+ :is(h1, h2, h3, h4, h5, h6)[data-align]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align]) > .bask-badge, .bask-root--flow-step :not([class*="--row"]) > .bask-badge:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align]) > .bask-badge { display: flex !important; } .bask-root--flow-step .bask-body-inner .bask-button--link { padding-left: 0 !important; padding-right: 0 !important; } .bask-alert { flex-direction: var(--bal-fd, row); align-items: var(--bal-ai, flex-start); } .bask-pos { --bpos: initial; --bz: initial; --bin-t: initial; --bin-r: initial; --bin-b: initial; --bin-l: initial; --bpos-md: initial; --bin-t-md: initial; --bin-r-md: initial; --bin-b-md: initial; --bin-l-md: initial; --bpos-sm: initial; --bin-t-sm: initial; --bin-r-sm: initial; --bin-b-sm: initial; --bin-l-sm: initial; --bpas: initial; --bpas-md: initial; --bpas-sm: initial; position: var(--bpos, static); top: var(--bin-t, auto); right: var(--bin-r, auto); bottom: var(--bin-b, auto); left: var(--bin-l, auto); z-index: var(--bz, auto); } .bask-grid > .bask-pos { align-self: var(--bpas, auto); } .bask-pos[data-sticky-stacked] { top: calc(var(--bask-sticky-above, 0px) + var(--bin-t)); } .bask-size { --bw: initial; --bw-md: initial; --bw-sm: initial; --bh: initial; --bh-md: initial; --bh-sm: initial; width: var(--bw, var(--bw-def, auto)); height: var(--bh, var(--bh-def, auto)); max-width: 100%; } .bask-order { --bord: initial; --bord-md: initial; --bord-sm: initial; order: var(--bord, 0); } @property --bimg { syntax: "*"; inherits: false; } @property --bimg-md { syntax: "*"; inherits: false; } @property --bimg-sm { syntax: "*"; inherits: false; } @property --bimg-pos { syntax: "*"; inherits: false; } @property --bimg-pos-md { syntax: "*"; inherits: false; } @property --bimg-pos-sm { syntax: "*"; inherits: false; } @property --bimg-size { syntax: "*"; inherits: false; } @property --bimg-size-md { syntax: "*"; inherits: false; } @property --bimg-size-sm { syntax: "*"; inherits: false; } .bask-bgimg, .bask-root--authoring .bask-bgimg { background-image: var(--bimg); background-position: var(--bimg-pos, center); background-size: var(--bimg-size, cover); background-repeat: no-repeat; } .bask-bgimg--fixed, .bask-root--authoring .bask-bgimg--fixed { background-attachment: fixed; } @media (prefers-reduced-motion: reduce) { .bask-bgimg--fixed, .bask-root--authoring .bask-bgimg--fixed { background-attachment: scroll; } } .bask-flow > * + * { margin-top: var(--bf-g); } .bask-flow > :where([data-brick-nested] + [data-brick-nested]) > * { margin-top: var(--bf-g); } .bask-layout-body { --b-mw: initial; --b-mw-md: initial; --b-mw-sm: initial; max-width: var(--b-mw); margin-inline: auto; isolation: isolate; } .bask-flow-wide { --bfw: min(64rem, calc(100cqw - 2 * var(--spacing-600))); flex: none; width: var(--bfw); margin-inline: calc((100% - var(--bfw)) / 2); } .bask-flow-full { --bfw: 100cqw; flex: none; width: var(--bfw); margin-inline: calc((100% - var(--bfw)) / 2); padding-inline: var(--spacing-500); box-sizing: border-box; } .bask-root--fill { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .bask-root--fill > main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: var(--bl-ay, flex-start); } .bask-body-inner { width: 100%; text-align: var(--bl-ax, left); } .bask-root--fill .bask-body-inner:has(> [data-body-placeholder]) { flex: 1 0 auto; display: flex; flex-direction: column; } .bask-root--fill .bask-body-zone { width: 100%; height: auto; } .bask-render-shell .bask-layout-body > div:not(.bask-flow-wide):not(.bask-flow-full) { display: contents; } .bask-root > div:has(> .bask-header) { display: contents; } @container bask (max-width: 1023px) { .bask-rsp { padding-top: var(--bp-t-md, var(--bp-t)); padding-bottom: var(--bp-b-md, var(--bp-b)); padding-left: var(--bp-l-md, var(--bp-l)); padding-right: var(--bp-r-md, var(--bp-r)); margin-top: var(--bm-t-md, var(--bm-t)); margin-bottom: var(--bm-b-md, var(--bm-b)); margin-left: var(--bm-l-md, var(--bm-l, var(--bmw-cx))); margin-right: var(--bm-r-md, var(--bm-r, var(--bmw-cx))); gap: var(--bg-md, var(--bg)); min-height: var(--b-mh-md, var(--b-mh)); } .bask-measure { padding-left: max(var(--bp-l-md, var(--bp-l, 0px)), calc((var(--bmw-base, 100%) - var(--bmw, 100%)) / 2)); padding-right: max(var(--bp-r-md, var(--bp-r, 0px)), calc((var(--bmw-base, 100%) - var(--bmw, 100%)) / 2)); } .bask-grid { grid-template-columns: repeat(var(--bgc-md, var(--bgc, 1)), minmax(0, 1fr)); } .bask-flex { flex-direction: var(--bfd-md, var(--bfd, row)); align-items: var(--bfa-md, var(--bfa, stretch)); justify-content: var(--bfj-md, var(--bfj, flex-start)); flex-wrap: var(--bfw-md, var(--bfw, nowrap)); } .bask-flex--row-md > .bask-rsp { margin-left: var(--bm-l-md, var(--bm-l, 0px)); margin-right: var(--bm-r-md, var(--bm-r, 0px)); } .bask-flex--col-md > .bask-rsp { margin-left: var(--bm-l-md, var(--bm-l, var(--bmw-cx))); margin-right: var(--bm-r-md, var(--bm-r, var(--bmw-cx))); } :is(.bask-flex--row-md, .bask-card--row-md):has(> .bask-media):has(> .bask-flex):not(:has(> :nth-child(3))) > :not(.bask-size:not(.bask-media)), :is(.bask-flex--row-md, .bask-card--row-md):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):not(:has(> :nth-child(3))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 1 1 0; min-width: 0; } :is(.bask-flex--col-md, .bask-card--col-md):has(> .bask-media):has(> .bask-flex):not(:has(> :nth-child(3))) > :not(.bask-size:not(.bask-media)), :is(.bask-flex--col-md, .bask-card--col-md):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):not(:has(> :nth-child(3))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 0 1 auto; } .bask-bgvideo-host:is(.bask-flex--row-md, .bask-card--row-md):has(> .bask-media):has(> .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > :not(.bask-size:not(.bask-media)), .bask-bgvideo-host:is(.bask-flex--row-md, .bask-card--row-md):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 1 1 0; min-width: 0; } .bask-bgvideo-host:is(.bask-flex--col-md, .bask-card--col-md):has(> .bask-media):has(> .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > :not(.bask-size:not(.bask-media)), .bask-bgvideo-host:is(.bask-flex--col-md, .bask-card--col-md):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 0 1 auto; } .bask-type { font-size: var(--bfs-md, var(--bfs)); line-height: var(--blh-md, var(--blh)); letter-spacing: var(--bls-md, var(--bls)); } .bask-align { text-align: var(--bta-md, var(--bta)); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align-md="left"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-md="left"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: flex-start; align-items: flex-start; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align-md="left"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-md="left"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, 0); margin-right: var(--bm-r, auto); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align-md="center"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-md="center"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: center; align-items: center; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align-md="center"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-md="center"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, auto); margin-right: var(--bm-r, auto); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align-md="right"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-md="right"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: flex-end; align-items: flex-end; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align-md="right"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-md="right"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, auto); margin-right: var(--bm-r, 0); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-md="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-md="left"]) > .bask-align { text-align: left; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-md="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-md="left"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align-md="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align-md="left"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, 0); margin-right: var(--bm-r, auto); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-md="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-md="center"]) > .bask-align { text-align: center; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-md="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-md="center"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align-md="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align-md="center"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, auto); margin-right: var(--bm-r, auto); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-md="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-md="right"]) > .bask-align { text-align: right; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-md="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-md="right"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align-md="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align-md="right"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, auto); margin-right: var(--bm-r, 0); } .bask-alert { flex-direction: var(--bal-fd-md, var(--bal-fd, row)); align-items: var(--bal-ai-md, var(--bal-ai, flex-start)); } .bask-pos { position: var(--bpos-md, var(--bpos, static)); top: var(--bin-t-md, var(--bin-t, auto)); right: var(--bin-r-md, var(--bin-r, auto)); bottom: var(--bin-b-md, var(--bin-b, auto)); left: var(--bin-l-md, var(--bin-l, auto)); } .bask-grid > .bask-pos { align-self: var(--bpas-md, var(--bpas, auto)); } .bask-pos[data-sticky-stacked] { top: calc(var(--bask-sticky-above, 0px) + var(--bin-t-md, var(--bin-t))); } .bask-grid--rev-md > :last-child { order: -1; } .bask-grid--divided { --bgd-wr: var(--bgd-w-md, var(--bgd-w, 0px)); --bgd-gr: var(--bg-md, var(--bg, 0px)); } .bask-grid--rev-lg:not(.bask-grid--rev-md) > :last-child { order: 0; } .bask-size { width: var(--bw-md, var(--bw, var(--bw-def, auto))); height: var(--bh-md, var(--bh, var(--bh-def, auto))); } .bask-order { order: var(--bord-md, var(--bord, 0)); } .bask-bgimg, .bask-root--authoring .bask-bgimg { background-image: var(--bimg-md, var(--bimg)); background-position: var(--bimg-pos-md, var(--bimg-pos, center)); background-size: var(--bimg-size-md, var(--bimg-size, cover)); } .bask-bgimg--fixed, .bask-root--authoring .bask-bgimg--fixed { background-attachment: scroll; } .bask-hide-md, [data-puck-component]:has(> .bask-hide-md) { display: none !important; } .bask-flow > * + * { margin-top: var(--bf-g-md, var(--bf-g)); } .bask-flow > :where([data-brick-nested] + [data-brick-nested]) > * { margin-top: var(--bf-g-md, var(--bf-g)); } .bask-layout-body { max-width: var(--b-mw-md, var(--b-mw)); margin-inline: auto; } } @container bask (max-width: 639px) { .bask-rsp { padding-top: var(--bp-t-sm, var(--bp-t-md, var(--bp-t))); padding-bottom: var(--bp-b-sm, var(--bp-b-md, var(--bp-b))); padding-left: var(--bp-l-sm, var(--bp-l-md, var(--bp-l))); padding-right: var(--bp-r-sm, var(--bp-r-md, var(--bp-r))); margin-top: var(--bm-t-sm, var(--bm-t-md, var(--bm-t))); margin-bottom: var(--bm-b-sm, var(--bm-b-md, var(--bm-b))); margin-left: var(--bm-l-sm, var(--bm-l-md, var(--bm-l, var(--bmw-cx)))); margin-right: var(--bm-r-sm, var(--bm-r-md, var(--bm-r, var(--bmw-cx)))); gap: var(--bg-sm, var(--bg-md, var(--bg))); min-height: var(--b-mh-sm, var(--b-mh-md, var(--b-mh))); } .bask-measure { padding-left: max(var(--bp-l-sm, var(--bp-l-md, var(--bp-l, 0px))), calc((var(--bmw-base, 100%) - var(--bmw, 100%)) / 2)); padding-right: max(var(--bp-r-sm, var(--bp-r-md, var(--bp-r, 0px))), calc((var(--bmw-base, 100%) - var(--bmw, 100%)) / 2)); } .bask-grid { grid-template-columns: repeat(var(--bgc-sm, var(--bgc-md, var(--bgc, 1))), minmax(0, 1fr)); } .bask-flex { flex-direction: var(--bfd-sm, var(--bfd-md, var(--bfd, row))); align-items: var(--bfa-sm, var(--bfa-md, var(--bfa, stretch))); justify-content: var(--bfj-sm, var(--bfj-md, var(--bfj, flex-start))); flex-wrap: var(--bfw-sm, var(--bfw-md, var(--bfw, nowrap))); } .bask-flex--row-sm > .bask-rsp { margin-left: var(--bm-l-sm, var(--bm-l-md, var(--bm-l, 0px))); margin-right: var(--bm-r-sm, var(--bm-r-md, var(--bm-r, 0px))); } .bask-flex--col-sm > .bask-rsp { margin-left: var(--bm-l-sm, var(--bm-l-md, var(--bm-l, var(--bmw-cx)))); margin-right: var(--bm-r-sm, var(--bm-r-md, var(--bm-r, var(--bmw-cx)))); } :is(.bask-flex--row-sm, .bask-card--row-sm):has(> .bask-media):has(> .bask-flex):not(:has(> :nth-child(3))) > :not(.bask-size:not(.bask-media)), :is(.bask-flex--row-sm, .bask-card--row-sm):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):not(:has(> :nth-child(3))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 1 1 0; min-width: 0; } :is(.bask-flex--col-sm, .bask-card--col-sm):has(> .bask-media):has(> .bask-flex):not(:has(> :nth-child(3))) > :not(.bask-size:not(.bask-media)), :is(.bask-flex--col-sm, .bask-card--col-sm):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):not(:has(> :nth-child(3))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 0 1 auto; } .bask-bgvideo-host:is(.bask-flex--row-sm, .bask-card--row-sm):has(> .bask-media):has(> .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > :not(.bask-size:not(.bask-media)), .bask-bgvideo-host:is(.bask-flex--row-sm, .bask-card--row-sm):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 1 1 0; min-width: 0; } .bask-bgvideo-host:is(.bask-flex--col-sm, .bask-card--col-sm):has(> .bask-media):has(> .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > :not(.bask-size:not(.bask-media)), .bask-bgvideo-host:is(.bask-flex--col-sm, .bask-card--col-sm):has(> [data-brick-nested] > .bask-media):has(> [data-brick-nested] > .bask-flex):has(> .bask-bgvideo-frame):not(:has(> :nth-child(4))) > [data-brick-nested] > :not(.bask-size:not(.bask-media)) { flex: 0 1 auto; } .bask-type { font-size: var(--bfs-sm, var(--bfs-md, var(--bfs))); line-height: var(--blh-sm, var(--blh-md, var(--blh))); letter-spacing: var(--bls-sm, var(--bls-md, var(--bls))); } .bask-align { text-align: var(--bta-sm, var(--bta-md, var(--bta))); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align-sm="left"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-sm="left"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: flex-start; align-items: flex-start; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align-sm="left"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-sm="left"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, 0); margin-right: var(--bm-r, auto); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align-sm="center"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-sm="center"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: center; align-items: center; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align-sm="center"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-sm="center"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, auto); margin-right: var(--bm-r, auto); } .bask-root--flow-step .bask-flex:has(> .bask-icon-tile:only-child):has(+ [data-align-sm="right"]), .bask-root--flow-step :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-sm="right"]) > .bask-flex:has(> :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile) { justify-content: flex-end; align-items: flex-end; } .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > .bask-icon-tile:has(+ [data-align-sm="right"]), .bask-root--flow-step :not(.bask-flex, .bask-stack, .bask-grid) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > [data-align-sm="right"]) > .bask-icon-tile { display: flex !important; margin-left: var(--bm-l, auto); margin-right: var(--bm-r, 0); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-sm="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-sm="left"]) > .bask-align { text-align: left; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-sm="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-sm="left"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align-sm="left"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align-sm="left"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, 0); margin-right: var(--bm-r, auto); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-sm="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-sm="center"]) > .bask-align { text-align: center; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-sm="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-sm="center"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align-sm="center"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align-sm="center"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, auto); margin-right: var(--bm-r, auto); } .bask-root--flow-step :not([class*="--row"]) > .bask-align:has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-sm="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-sm="right"]) > .bask-align { text-align: right; } .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ .bask-flex > .bask-icon-tile:only-child):has(+ .bask-flex + [data-align-sm="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > .bask-flex > :is([data-puck-component], [data-brick-id]):only-child > .bask-icon-tile):has(+ :is([data-puck-component], [data-brick-id]) + :is([data-puck-component], [data-brick-id]) > [data-align-sm="right"]) > :is(.bask-badge, [style*="--bmw-cx"]), .bask-root--flow-step :not([class*="--row"]) > :is(.bask-badge, [style*="--bmw-cx"]):has(+ :is(h1, h2, h3, h4, h5, h6)[data-align-sm="right"]), .bask-root--flow-step :not([class*="--row"]) > :is([data-puck-component], [data-brick-id]):has(+ :is([data-puck-component], [data-brick-id]) > :is(h1, h2, h3, h4, h5, h6)[data-align-sm="right"]) > :is(.bask-badge, [style*="--bmw-cx"]) { margin-left: var(--bm-l, auto); margin-right: var(--bm-r, 0); } .bask-alert { flex-direction: var(--bal-fd-sm, var(--bal-fd-md, var(--bal-fd, row))); align-items: var(--bal-ai-sm, var(--bal-ai-md, var(--bal-ai, flex-start))); } .bask-pos { position: var(--bpos-sm, var(--bpos-md, var(--bpos, static))); top: var(--bin-t-sm, var(--bin-t-md, var(--bin-t, auto))); right: var(--bin-r-sm, var(--bin-r-md, var(--bin-r, auto))); bottom: var(--bin-b-sm, var(--bin-b-md, var(--bin-b, auto))); left: var(--bin-l-sm, var(--bin-l-md, var(--bin-l, auto))); } .bask-grid > .bask-pos { align-self: var(--bpas-sm, var(--bpas-md, var(--bpas, auto))); } .bask-pos[data-sticky-stacked] { top: calc(var(--bask-sticky-above, 0px) + var(--bin-t-sm, var(--bin-t-md, var(--bin-t)))); } .bask-grid.bask-grid--rev-sm > :last-child { order: -1; } .bask-grid--divided { --bgd-wr: var(--bgd-w-sm, var(--bgd-w-md, var(--bgd-w, 0px))); --bgd-gr: var(--bg-sm, var(--bg-md, var(--bg, 0px))); } .bask-grid.bask-grid--swipe { --bgs-n: var(--bgc-sm, var(--bgc-md, var(--bgc, 1))); grid-template-columns: none; grid-auto-flow: column !important; grid-auto-columns: calc((100% - (var(--bgs-n) - 1) * var(--bg-sm, var(--bg-md, var(--bg, 0px)))) / var(--bgs-n) * 0.85); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .bask-grid--swipe::-webkit-scrollbar { display: none; } .bask-grid--swipe > * { scroll-snap-align: start; } .bask-grid:is(.bask-grid--rev-lg, .bask-grid--rev-md):not(.bask-grid--rev-sm) > :last-child { order: 0; } .bask-size { width: var(--bw-sm, var(--bw-md, var(--bw, var(--bw-def, auto)))); height: var(--bh-sm, var(--bh-md, var(--bh, var(--bh-def, auto)))); } .bask-order { order: var(--bord-sm, var(--bord-md, var(--bord, 0))); } .bask-bgimg, .bask-root--authoring .bask-bgimg { background-image: var(--bimg-sm, var(--bimg-md, var(--bimg))); background-position: var(--bimg-pos-sm, var(--bimg-pos-md, var(--bimg-pos, center))); background-size: var(--bimg-size-sm, var(--bimg-size-md, var(--bimg-size, cover))); } .bask-hide-sm, [data-puck-component]:has(> .bask-hide-sm) { display: none !important; } .bask-flow > * + * { margin-top: var(--bf-g-sm, var(--bf-g-md, var(--bf-g))); } .bask-flow > :where([data-brick-nested] + [data-brick-nested]) > * { margin-top: var(--bf-g-sm, var(--bf-g-md, var(--bf-g))); } .bask-layout-body { max-width: var(--b-mw-sm, var(--b-mw-md, var(--b-mw))); margin-inline: auto; } } @container bask (min-width: 1024px) { .bask-hide-lg, [data-puck-component]:has(> .bask-hide-lg) { display: none !important; } } .bask-stepper { display: flex; align-items: center; width: 100%; } .bask-stepper-item { display: flex; align-items: center; flex: 1 1 0; min-width: 0; } .bask-stepper-item:last-child { flex: none; } .bask-stepper-circle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: var(--radius-full); background: var(--bask-stepper-track, hsl(var(--muted))); color: hsl(var(--muted-foreground)); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-02); line-height: var(--line-height-body-02); letter-spacing: var(--letter-spacing-body-02); transition: background 150ms ease, color 150ms ease; } .bask-stepper-item[data-done="true"] .bask-stepper-circle { background: var(--bask-stepper-accent, hsl(var(--primary))); color: hsl(var(--primary-foreground)); } .bask-stepper-dot { flex: none; width: 0.625em; height: 0.625em; border-radius: var(--radius-full); background: var(--bask-stepper-track, hsl(var(--muted))); transition: background 150ms ease; } .bask-stepper-item[data-done="true"] .bask-stepper-dot { background: var(--bask-stepper-accent, hsl(var(--primary))); } .bask-stepper-bar { flex: 1 1 0; height: 0.375em; border-radius: var(--radius-full); background: var(--bask-stepper-track, hsl(var(--muted))); transition: background 150ms ease; } .bask-stepper-item[data-done="true"] .bask-stepper-bar { background: var(--bask-stepper-accent, hsl(var(--primary))); } .bask-stepper-connector { flex: 1 1 0; height: var(--stroke-xs, 1px); background: var(--bask-stepper-track, hsl(var(--muted))); min-width: var(--spacing-100); } @media (prefers-reduced-motion: reduce) { .bask-stepper-circle, .bask-stepper-dot, .bask-stepper-bar { transition: none; } } .bask-rating-stars { display: inline-flex; align-items: center; gap: var(--spacing-50); } .bask-rating-star { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); transition: color 120ms ease, transform 120ms ease; } .bask-rating-star:hover, .bask-rating-star[aria-pressed="true"] { color: var(--bask-rating-accent, hsl(var(--primary))); } .bask-rating-star:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); } .bask-rating-star:active { transform: scale(0.92); } .bask-rating-readonly { display: inline-block; } @media (prefers-reduced-motion: reduce) { .bask-rating-star { transition: none; } .bask-rating-star:active { transform: none; } } .bask-video-embed { display: block; } .bask-video-embed-aspect { position: relative; width: 100%; } .bask-video-embed-aspect iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; } .bask-video-overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; pointer-events: none; } .bask-video-overlay > * { pointer-events: auto; } .bask-root--authoring .bask-video-overlay { pointer-events: auto; } .bask-video-embed-aspect[data-video-started] > .bask-video-overlay { display: none; } .bask-video-facade { background: hsl(var(--muted)); } .bask-video-facade > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bask-video-embed { --bvp-k: var(--bvp-corner, 0); --bvp-s: var(--bvp-size, 4rem); } .bask-video-play { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--bvp-s); height: var(--bvp-s); border-radius: var(--radius-full); font-size: calc(var(--bvp-s) * 0.4); left: calc(50% * (1 - var(--bvp-k)) + var(--spacing-500) * var(--bvp-k)); top: calc(50% * (1 - var(--bvp-k)) + (100% - var(--spacing-500)) * var(--bvp-k)); transform: translate(calc(-50% * (1 - var(--bvp-k))), calc(-50% - 50% * var(--bvp-k))); transition: scale 160ms ease, background 160ms ease; } .bask-video-play:dir(rtl) { left: auto; right: calc(50% * (1 - var(--bvp-k)) + var(--spacing-500) * var(--bvp-k)); transform: translate(calc(50% * (1 - var(--bvp-k))), calc(-50% - 50% * var(--bvp-k))); } .bask-video-play:hover { scale: 1.06; } .bask-video-play:focus-visible { outline: var(--stroke-sm) solid hsl(var(--ring)); outline-offset: 3px; } .bask-video-play[data-look="solid"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-mid); } .bask-video-play[data-look="glass"] { background: rgb(255 255 255 / 0.18); color: rgb(255 255 255); border: var(--stroke-xs) solid rgb(255 255 255 / 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @container bask (max-width: 1023px) { .bask-video-embed { --bvp-k: var(--bvp-corner-md, var(--bvp-corner, 0)); --bvp-s: var(--bvp-size-md, var(--bvp-size, 4rem)); } } @container bask (max-width: 639px) { .bask-video-embed { --bvp-k: var(--bvp-corner-sm, var(--bvp-corner-md, var(--bvp-corner, 0))); --bvp-s: var(--bvp-size-sm, var(--bvp-size-md, var(--bvp-size, 4rem))); } } @media (prefers-reduced-motion: reduce) { .bask-video-play { transition: none; } } @media (prefers-reduced-motion: no-preference) { .bask-rvk-host[data-editing="false"][data-revealed="false"] .bask-rvk > :nth-child(n):not([class*="bask-scrub-"]) { opacity: 0; } .bask-rvk-host[data-revealed="true"] .bask-rvk > :nth-child(n):not([class*="bask-scrub-"]) { animation: bask-rvk-in var(--bask-reveal-dur, 500ms) var(--motion-easing-out, cubic-bezier(0, 0, 0.2, 1)) both; animation-delay: calc(var(--bask-reveal-delay, 0ms) + var(--brvk-i, 0) * var(--bask-rvk-step, 90ms)); } } @keyframes bask-rvk-in { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } } .bask-rvk > :nth-child(1) { --brvk-i: 0; } .bask-rvk > :nth-child(2) { --brvk-i: 1; } .bask-rvk > :nth-child(3) { --brvk-i: 2; } .bask-rvk > :nth-child(4) { --brvk-i: 3; } .bask-rvk > :nth-child(5) { --brvk-i: 4; } .bask-rvk > :nth-child(6) { --brvk-i: 5; } .bask-rvk > :nth-child(7) { --brvk-i: 6; } .bask-rvk > :nth-child(8) { --brvk-i: 7; } .bask-rvk > :nth-child(9) { --brvk-i: 8; } .bask-rvk > :nth-child(10) { --brvk-i: 9; } .bask-rvk > :nth-child(11) { --brvk-i: 10; } .bask-rvk > :nth-child(n + 12) { --brvk-i: 11; } @supports (animation-timeline: view()) { .bask-scrub-drift-up, .bask-scrub-drift-down, .bask-scrub-scale-in { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% cover 45%; } .bask-scrub-drift-up { animation-name: bask-scrub-drift-up; } .bask-scrub-drift-down { animation-name: bask-scrub-drift-down; } .bask-scrub-scale-in { animation-name: bask-scrub-scale-in; } } @keyframes bask-scrub-drift-up { from { opacity: 0.55; translate: 0 2.75rem; } to { opacity: 1; translate: 0 0; } } @keyframes bask-scrub-drift-down { from { opacity: 0.55; translate: 0 -2.75rem; } to { opacity: 1; translate: 0 0; } } @keyframes bask-scrub-scale-in { from { opacity: 0.6; scale: 0.93; } to { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: reduce) { .bask-scrub-drift-up, .bask-scrub-drift-down, .bask-scrub-scale-in { animation: none; } } .bask-media-band { position: relative; width: 100%; } .bask-pos.bask-media-band { position: var(--bpos, relative); } .bask-bgvideo-frame { --bgv-pos: initial; --bgv-pos-md: initial; --bgv-pos-sm: initial; background-size: cover; background-position: var(--bgv-pos, center); } .bask-bgvideo-frame { position: absolute; inset: 0; overflow: clip; z-index: 0; pointer-events: none; } .bask-bgvideo-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bgv-pos, center); } .bask-bgvideo-scrim { position: absolute; inset: 0; } .bask-bgvideo-host { isolation: isolate; } .bask-pos.bask-bgvideo-host { position: var(--bpos, relative); } .bask-bgvideo-host > .bask-bgvideo-frame { z-index: -1; border-radius: inherit; } .bask-root--authoring .bask-bgvideo-host > .bask-bgvideo-frame { opacity: 1; } .bask-root--authoring .bask-bgvideo-host[data-puck-dropzone]:not(:has(> [data-puck-component])) { min-height: var(--puck-slot-min-empty-height); } .bask-flow > .bask-bgvideo-frame + * { margin-top: 0; } @container bask (max-width: 1023px) { .bask-bgvideo-frame { background-position: var(--bgv-pos-md, var(--bgv-pos, center)); } .bask-bgvideo-frame > video { object-position: var(--bgv-pos-md, var(--bgv-pos, center)); } .bask-pos.bask-bgvideo-host { position: var(--bpos-md, var(--bpos, relative)); } } @container bask (max-width: 639px) { .bask-bgvideo-frame { background-position: var(--bgv-pos-sm, var(--bgv-pos-md, var(--bgv-pos, center))); } .bask-bgvideo-frame > video { object-position: var(--bgv-pos-sm, var(--bgv-pos-md, var(--bgv-pos, center))); } .bask-pos.bask-bgvideo-host { position: var(--bpos-sm, var(--bpos-md, var(--bpos, relative))); } } .bask-bgvideo-frame > video[data-scheme="light"] { display: var(--bask-on-light, block); } .bask-bgvideo-frame > video[data-scheme="dark"] { display: var(--bask-on-dark, block); } @media (prefers-reduced-motion: reduce) { .bask-bgvideo-frame > video, .bask-bgvideo-frame > video[data-scheme] { display: none; } } .bask-gradient-pan { background-size: 200% 200%; animation: bask-gradient-pan 16s var(--motion-easing-standard, ease-in-out) infinite alternate; } .bask-root--authoring .bask-gradient-pan { background-size: 200% 200%; } @keyframes bask-gradient-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .bask-gradient-pan { animation: none; } } .bask-amb-drift { animation: bask-amb-drift 18s var(--motion-easing-standard, ease-in-out) infinite alternate; } @keyframes bask-amb-drift { from { translate: 0 0; rotate: 0deg; } to { translate: 2.5rem -1.75rem; rotate: 10deg; } } .bask-amb-pulse { animation: bask-amb-pulse 9s ease-in-out infinite alternate; } @keyframes bask-amb-pulse { from { scale: 1; } to { scale: 1.12; } } @media (prefers-reduced-motion: reduce) { .bask-amb-drift, .bask-amb-pulse { animation: none; } } .bask-fg-alt { display: flex; flex-direction: column; } .bask-fg-alt > :nth-child(n) { width: 100%; align-items: center; } .bask-fg-alt > :nth-child(even) { flex-direction: row-reverse; } .bask-fg-alt > :nth-child(n) > * { flex: 1 1 0; min-width: 0; } .bask-fg-alt--editing > :nth-child(even) { flex-direction: column; } .bask-fg-alt--editing > :nth-child(n) > .bask-flex { width: 100%; align-items: center; } .bask-fg-alt--editing > :nth-child(even) > .bask-flex { flex-direction: row-reverse; } .bask-fg-alt--editing > :nth-child(n) > .bask-flex > * { flex: 1 1 0; min-width: 0; } @container bask (max-width: 639px) { .bask-fg-alt > :nth-child(n), .bask-fg-alt--editing > :nth-child(n) > .bask-flex { flex-direction: column; } .bask-fg-alt > :nth-child(n) > *, .bask-fg-alt--editing > :nth-child(n) > .bask-flex > * { flex: 0 1 auto; } } .bask-steps-connect > :nth-child(n) { position: relative; } .bask-steps-connect > :nth-child(n):not(:first-child)::before { content: ""; position: absolute; top: 2.6rem; left: calc(-1 * var(--bask-steps-gap, var(--spacing-600))); width: var(--bask-steps-gap, var(--spacing-600)); border-top: var(--stroke-sm, 2px) solid currentColor; opacity: 0.25; } .bask-steps-connect--dashed > :nth-child(n):not(:first-child)::before { border-top-style: dashed; } @container bask (max-width: 639px) { .bask-steps-connect > :nth-child(n):not(:first-child)::before { display: none; } } .bask-steps-rail { position: relative; padding-left: 2.5rem; } .bask-steps-rail::before { content: ""; position: absolute; left: 0.7rem; top: 0.9rem; bottom: 0.9rem; border-left: var(--stroke-sm, 2px) solid currentColor; opacity: 0.18; } .bask-steps-rail--dashed::before { border-left-style: dashed; } .bask-steps-rail > :nth-child(n), .bask-steps-rail > :where([data-brick-nested]) > * { position: relative; } .bask-steps-rail > :nth-child(n):where(:not([data-brick-nested]))::after, .bask-steps-rail > :where([data-brick-nested]) > *::after { content: ""; position: absolute; top: 1.35rem; left: calc(-2.5rem + 0.7rem - 0.3rem + (var(--stroke-sm, 2px) / 2)); width: 0.65rem; height: 0.65rem; border-radius: var(--radius-full); background: hsl(var(--primary)); } .bask-stat-chip[data-puck-dropzone]:not(:has([data-puck-component])) { display: none; } .bask-cmp-row { display: grid; grid-template-columns: var(--bask-cmp-cols, minmax(0, 2fr) repeat(2, minmax(0, 1fr))); align-items: stretch; width: 100%; } .bask-hero-media--left { order: -1; } @container bask (max-width: 1023px) { .bask-hero-media--left { order: 0; } } @container bask (max-width: 639px) { .bask-cta-actions { width: 100%; } .bask-cta-actions > a:not([data-shape="circle"]) { width: 100%; justify-content: center; } .bask-cta-actions > .bask-button:not([data-shape="circle"]) { width: 100% !important; } body:has(#frame-root) .bask-cta-actions > [data-puck-component]:has(> .bask-button:not([data-shape="circle"])) { width: 100%; } body:has(#frame-root) .bask-cta-actions > [data-puck-component] > .bask-button:not([data-shape="circle"]) { width: 100% !important; justify-content: center; } } .bask-eligibility { display: flex; flex-direction: column; gap: var(--spacing-400); width: 100%; align-self: stretch; } .bask-eligibility__title { font-family: var(--font-family-heading); font-size: var(--font-size-heading-05); line-height: var(--line-height-heading-05); letter-spacing: var(--letter-spacing-heading-05); font-weight: var(--font-weight-bold); color: hsl(var(--foreground)); margin: 0; } .bask-eligibility__body { font-family: var(--font-family-body); font-size: var(--font-size-body-01); line-height: var(--line-height-body-01); color: hsl(var(--muted-foreground)); margin: 0; } .bask-eligibility__continue { width: 100%; padding: var(--spacing-300) var(--spacing-500); font-family: var(--font-family-body); font-size: var(--font-size-body-01); font-weight: var(--font-weight-medium); color: var(--btn-default-text, hsl(var(--primary-foreground))); background: var(--btn-default-fill, hsl(var(--primary))); border: var(--btn-default-border-width, 0px) var(--btn-default-border-style, none) var(--btn-default-border, transparent); border-radius: var(--btn-default-radius, var(--radius-lg)); cursor: pointer; } .bask-eligibility__continue:disabled { opacity: var(--btn-disabled-opacity, 0.6); cursor: not-allowed; } .bask-auth-group__screen { display: flex; flex-direction: column; width: 100%; align-self: stretch; min-width: 0; } .bask-auth-group__submit { display: flex; flex-direction: column; }