/** * Open Hours Booking (VX) widget styles. * * Theme-first: every colour, border and surface is pulled from Voxel's design * tokens (--ts-shade-1…7 = text→light bg; --ts-accent-1 = the theme accent) via a * small "bridge" of local vars, each with a safe fallback so nothing breaks if a * token is missing. Typography is inherited from the theme (no font-family here). * Interactive controls reuse Voxel's own classes (.ts-btn, .ts-filter, * .ts-stepper-input, .ts-icon-btn) so they already match the theme — this file only * adds the calendar grid + layout the theme has no equivalent for. * * @package VxBookings */ .vxb-ohb { /* Theme bridge — map Voxel tokens to semantic names (fallbacks keep it safe). */ --vxb-text: var(--ts-shade-1, #313135); --vxb-muted: var(--ts-shade-2, #797a88); --vxb-border: var(--ts-shade-4, #dadfe4); --vxb-bg-soft: var(--ts-shade-5, #f3f3f3); --vxb-bg: var(--ts-shade-7, #fff); --vxb-accent: var(--ts-accent-1, #4f46e5); --vxb-on-accent: #fff; --vxb-radius: 8px; display: flex; flex-direction: column; gap: 20px; max-width: 420px; color: inherit; } .vxb-ohb[v-cloak] { display: none; } /* Flatten the browser's default 3D button bevel. A native