@smart-wizard/ui 0.0.0-stage → 1.0.0

package/dist/smartwizard-full.css

@@ -0,0 +1,844 @@
+@charset "UTF-8";
+/*! SmartWizard
+ * A modern, framework-agnostic wizard/stepper component
+ * https://github.com/techlab/smart-wizard
+ *
+ * Licensed under the terms of the MIT License
+ */
+.sw {
+  box-sizing: border-box;
+}
+.sw > *,
+.sw > *::before,
+.sw > *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.sw {
+  color-scheme: light;
+  --sw-bg: #ffffff;
+  --sw-surface: #f8fafc;
+  --sw-surface-2: #f1f5f9;
+  --sw-border: #e2e8f0;
+  --sw-border-strong: #8a96a8;
+  --sw-text: #0f172a;
+  --sw-text-muted: #475569;
+  --sw-text-disabled: #94a3b8;
+  --sw-primary: #4f46e5;
+  --sw-on-primary: #ffffff;
+  --sw-success: #22c55e;
+  --sw-warning: #f59e0b;
+  --sw-danger: #ef4444;
+  --sw-info: #0ea5e9;
+  --sw-on-status: #0b1220;
+  --sw-radius: .4rem;
+  --sw-radius-lg: .75rem;
+  --sw-border-width: 1px;
+  --sw-shadow: 0 4px 20px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
+  --sw-transition: .2s cubic-bezier(.4, 0, .2, 1);
+  --sw-panel-padding: 24px;
+  --sw-nav-padding: 14px 20px;
+  --sw-btn-padding: 8px 18px;
+  --sw-disabled-opacity: .45;
+  --_sw-mix: #000000;
+  --_sw-primary-hover: color-mix(in srgb, var(--sw-primary) 88%, var(--_sw-mix));
+  --_sw-primary-active: color-mix(in srgb, var(--sw-primary) 76%, var(--_sw-mix));
+  --_sw-primary-tint: color-mix(in srgb, var(--sw-primary) 14%, transparent);
+  --_sw-primary-tint-strong: color-mix(in srgb, var(--sw-primary) 22%, transparent);
+  --_sw-ring: color-mix(in srgb, var(--sw-primary) 45%, transparent);
+  --_sw-overlay: color-mix(in srgb, var(--sw-bg) 70%, transparent);
+}
+
+.sw[data-color-scheme=dark],
+[data-color-scheme=dark] .sw,
+.dark .sw {
+  color-scheme: dark;
+  --sw-bg: #11151d;
+  --sw-surface: #1b2130;
+  --sw-surface-2: #252c3d;
+  --sw-border: #31384b;
+  --sw-border-strong: #6b7689;
+  --sw-text: #f1f5f9;
+  --sw-text-muted: #94a3b8;
+  --sw-text-disabled: #5f6778;
+  --sw-primary: #818cf8;
+  --sw-on-primary: #0f1226;
+  --sw-shadow: 0 4px 20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
+  --_sw-mix: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  .sw[data-color-scheme=auto] {
+    color-scheme: dark;
+    --sw-bg: #11151d;
+    --sw-surface: #1b2130;
+    --sw-surface-2: #252c3d;
+    --sw-border: #31384b;
+    --sw-border-strong: #6b7689;
+    --sw-text: #f1f5f9;
+    --sw-text-muted: #94a3b8;
+    --sw-text-disabled: #5f6778;
+    --sw-primary: #818cf8;
+    --sw-on-primary: #0f1226;
+    --sw-shadow: 0 4px 20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
+    --_sw-mix: #ffffff;
+  }
+}
+/* ─────────────────────────────────────────────
+   COLOR PRESETS
+   Each preset overrides the CSS variables defined in _root.scss.
+   ───────────────────────────────────────────── */
+.sw[data-color=ocean] {
+  --sw-primary: #0288d1;
+  --sw-on-primary: #ffffff;
+}
+.sw[data-color=forest] {
+  --sw-primary: #388e3c;
+  --sw-on-primary: #f1f8e9;
+}
+.sw[data-color=violet] {
+  --sw-primary: #7b1fa2;
+  --sw-on-primary: #f3e5f5;
+}
+.sw[data-color=crimson] {
+  --sw-primary: #c2185b;
+  --sw-on-primary: #fce4ec;
+}
+.sw[data-color=amber] {
+  --sw-primary: #ffa000;
+  --sw-on-primary: #ffffff;
+}
+.sw[data-color=indigo] {
+  --sw-primary: #3949ab;
+  --sw-on-primary: #ffffff;
+}
+.sw[data-color=slate] {
+  --sw-primary: #1e40af;
+  --sw-on-primary: #ffffff;
+}
+.sw[data-color=teal] {
+  --sw-primary: #0097a7;
+  --sw-on-primary: #ffffff;
+}
+.sw[data-color=purple] {
+  --sw-primary: #7c3aed;
+  --sw-on-primary: #ffffff;
+}
+.sw[data-color=green] {
+  --sw-primary: #16a34a;
+  --sw-on-primary: #ffffff;
+}
+
+.sw {
+  overflow: hidden;
+  position: relative;
+  font-family: inherit;
+  border: var(--sw-border-width) solid var(--sw-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: var(--sw-shadow);
+  background: var(--sw-bg);
+}
+
+.sw > .sw-nav {
+  display: flex;
+  list-style: none;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  background: var(--sw-bg);
+  border-bottom: var(--sw-border-width) solid var(--sw-border);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+.sw > .sw-nav::-webkit-scrollbar {
+  display: none;
+}
+.sw > .sw-nav:hover > .sw-nav-scroll-btn {
+  opacity: 0.8;
+}
+@media screen and (max-width: 640px) {
+  .sw > .sw-nav {
+    flex-direction: column !important;
+    flex: 1 auto;
+    border-bottom: none;
+  }
+  .sw > .sw-nav > .sw-nav-item {
+    border-bottom: var(--sw-border-width) solid var(--sw-border);
+  }
+  .sw > .sw-nav > .sw-nav-item:last-child {
+    border-bottom: none;
+  }
+  .sw > .sw-nav > .sw-nav-item.active::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--sw-on-primary);
+    opacity: 0.5;
+  }
+}
+.sw > .sw-nav .sw-nav-item-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  list-style: none;
+  z-index: 1;
+  align-items: center;
+  width: 100%;
+  user-select: none;
+  text-decoration: none;
+  position: relative;
+  transition: var(--sw-transition);
+  white-space: nowrap;
+}
+.sw > .sw-nav .sw-nav-item-group:has(.sw-nav-item.active) .sw-group-header {
+  color: var(--sw-primary) !important;
+}
+.sw > .sw-nav .sw-nav-item-group > .sw-group-header {
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sw-text-muted);
+  background: var(--sw-surface-2);
+  font-weight: 700;
+  padding: 5px;
+}
+.sw > .sw-nav .sw-nav-item-group > .sw-nav-item {
+  flex: 1;
+}
+.sw > .sw-nav .sw-nav-item {
+  display: flex;
+  position: relative;
+  list-style: none;
+  z-index: 1;
+  align-items: center;
+  width: 100%;
+  cursor: default;
+  user-select: none;
+  color: var(--sw-text-muted);
+  background: transparent;
+  text-decoration: none;
+  position: relative;
+  transition: var(--sw-transition);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  padding: var(--sw-nav-padding);
+  gap: 10px;
+}
+.sw > .sw-nav .sw-nav-item:hover, .sw > .sw-nav .sw-nav-item:active, .sw > .sw-nav .sw-nav-item:focus {
+  text-decoration: none;
+}
+.sw > .sw-nav .sw-nav-item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--_sw-ring);
+  z-index: 10;
+}
+.sw > .sw-nav .sw-nav-item:hover:not(.disabled) .badge {
+  transform: scale(1.05);
+}
+.sw > .sw-nav .sw-nav-item::-moz-focus-inner {
+  border: 0;
+}
+.sw > .sw-nav .sw-nav-item > .badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  pointer-events: none;
+  clear: both;
+  line-height: 1;
+  font-size: 1em;
+  color: var(--sw-text-muted);
+  background: var(--sw-bg);
+  border: 1px solid var(--sw-border);
+  transition: var(--sw-transition);
+}
+.sw > .sw-nav .sw-nav-item > .info {
+  display: flex;
+  flex-direction: column;
+}
+.sw > .sw-nav .sw-nav-item > .info > .title {
+  font-size: 1em;
+  font-weight: 700;
+}
+.sw > .sw-nav .sw-nav-item > .info > .desc {
+  font-size: 0.8em;
+}
+.sw > .sw-nav .sw-nav-item.active {
+  cursor: pointer;
+  color: var(--sw-on-primary);
+  background: var(--sw-primary);
+}
+.sw > .sw-nav .sw-nav-item.active .badge {
+  color: var(--sw-on-primary);
+  background: var(--_sw-primary-active);
+  border-color: var(--_sw-primary-hover);
+  box-shadow: 0 0 0 4px var(--_sw-primary-tint);
+}
+.sw > .sw-nav .sw-nav-item.completed {
+  cursor: pointer;
+  color: var(--sw-primary);
+  background: var(--_sw-primary-tint);
+}
+.sw > .sw-nav .sw-nav-item.completed .badge {
+  color: var(--sw-on-primary);
+  background: var(--sw-primary);
+  border-color: transparent;
+}
+.sw > .sw-nav .sw-nav-item.error {
+  cursor: pointer;
+  color: var(--sw-on-status);
+  background: var(--sw-danger);
+}
+.sw > .sw-nav .sw-nav-item.error .badge {
+  color: var(--sw-on-status);
+  background: var(--sw-danger);
+  border-color: transparent;
+}
+.sw > .sw-nav .sw-nav-item.warning {
+  cursor: pointer;
+  color: var(--sw-on-status);
+  background: var(--sw-warning);
+}
+.sw > .sw-nav .sw-nav-item.warning .badge {
+  color: var(--sw-on-status);
+  background: var(--sw-warning);
+  border-color: transparent;
+}
+.sw > .sw-nav .sw-nav-item.hidden {
+  display: none;
+  visibility: hidden;
+}
+.sw > .sw-nav .sw-nav-item.disabled, .sw > .sw-nav .sw-nav-item:disabled {
+  opacity: var(--sw-disabled-opacity);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.sw > .sw-nav > .sw-nav-scroll-btn {
+  display: flex;
+  width: 40px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  color: var(--sw-text);
+  padding: 0;
+  flex-shrink: 0;
+  position: sticky;
+  z-index: 20;
+  opacity: 0.5;
+  font-size: 2em;
+  transition: var(--sw-transition);
+  background: var(--sw-bg);
+}
+.sw > .sw-nav > .sw-nav-scroll-btn:before {
+  content: " ";
+  display: inline-block;
+  transition: transform 0.2s ease;
+}
+.sw > .sw-nav > .sw-nav-scroll-btn:first-child {
+  left: 0;
+  border-right: var(--sw-border-width) solid var(--sw-border);
+}
+.sw > .sw-nav > .sw-nav-scroll-btn:first-child:before {
+  content: "‹";
+}
+.sw > .sw-nav > .sw-nav-scroll-btn:last-child {
+  right: 0;
+  border-left: var(--sw-border-width) solid var(--sw-border);
+}
+.sw > .sw-nav > .sw-nav-scroll-btn:last-child:before {
+  content: "›";
+}
+.sw > .sw-nav > .sw-nav-scroll-btn:hover {
+  background: var(--sw-surface-2);
+  color: var(--sw-text);
+  opacity: 1;
+}
+.sw.sw-justified > .sw-nav {
+  justify-content: space-between;
+}
+.sw[dir=rtl] > .sw-nav .sw-nav-item > .badge {
+  float: right;
+}
+
+.sw > .sw-panels {
+  position: relative;
+  padding: var(--sw-panel-padding);
+  background: var(--sw-surface);
+  color: var(--sw-text);
+  min-height: 140px;
+  transition: height 0.5s ease;
+}
+.sw > .sw-panels > .sw-panel {
+  padding: var(--sw-panel-padding);
+  background: var(--sw-surface);
+  color: var(--sw-text);
+  width: 100%;
+  display: none;
+}
+.sw > .sw-panels > .sw-panel.active {
+  display: block;
+}
+.sw > .sw-panels > .sw-panel .sw-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: var(--sw-text);
+}
+.sw > .sw-panels > .sw-panel .sw-desc {
+  font-size: 1rem;
+  color: var(--sw-text);
+  margin-bottom: 1.5rem;
+}
+.sw > .sw-panels > .sw-panel .sw-label {
+  display: block;
+  margin-bottom: 1rem;
+  color: var(--sw-text);
+}
+.sw > .sw-panels > .sw-panel .sw-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: var(--sw-border-width) solid var(--sw-border);
+  border-radius: var(--sw-radius);
+  background: var(--sw-bg);
+  color: var(--sw-text);
+  margin-bottom: 1.25rem;
+  outline: none;
+  transition: var(--sw-transition);
+}
+.sw > .sw-panels > .sw-panel .sw-input:focus {
+  border-color: var(--sw-primary);
+  box-shadow: 0 0 0 2px var(--_sw-ring);
+}
+.sw > .sw-panels > .sw-panel .sw-input::placeholder {
+  color: var(--sw-text-muted);
+}
+.sw > .sw-panels > .sw-panel .sw-field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 1.5rem;
+}
+@media screen and (max-width: 640px) {
+  .sw > .sw-panels > .sw-panel .sw-field-row {
+    grid-template-columns: 1fr;
+  }
+}
+.sw > .sw-panels > .sw-panel .sw-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw .sw-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  flex-wrap: wrap;
+  background: var(--sw-surface);
+  gap: 1rem;
+}
+.sw .sw-toolbar-top {
+  border-top: none;
+  border-bottom: var(--sw-border-width) solid var(--sw-border);
+}
+.sw .sw-toolbar-bottom {
+  border-bottom: none;
+  border-top: var(--sw-border-width) solid var(--sw-border);
+}
+.sw .sw-toolbar-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--sw-border);
+  margin: 0 0.5rem;
+}
+.sw .sw-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: auto;
+  justify-content: center;
+}
+.sw .sw-toolbar-group:first-child {
+  justify-content: flex-start;
+}
+.sw .sw-toolbar-group:last-child {
+  justify-content: flex-end;
+}
+
+.sw .sw-progress {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 100%;
+  background: var(--sw-border);
+  overflow: hidden;
+  height: 4px;
+  border-radius: var(--sw-radius);
+}
+.sw .sw-progress .sw-progress-bar {
+  height: 100%;
+  width: 0%;
+  background: var(--sw-primary);
+  transition: width var(--sw-transition);
+}
+
+.sw.sw-loading {
+  user-select: none;
+}
+.sw.sw-loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--_sw-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.sw.sw-loading::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  margin-left: -20px;
+  border: 4px solid var(--sw-border);
+  border-top-color: var(--sw-primary);
+  border-radius: 50%;
+  animation: sw-spinner 0.8s linear infinite;
+  z-index: 1001;
+}
+@keyframes sw-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sw .sw-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: var(--sw-btn-padding);
+  border-radius: var(--sw-radius);
+  border: var(--sw-border-width) solid var(--sw-btn-default-border);
+  background: var(--sw-btn-default-bg);
+  color: var(--sw-btn-default-text);
+  transition: var(--sw-transition);
+}
+.sw .sw-btn:hover {
+  box-shadow: 0 0 0 2px var(--sw-surface-2);
+}
+.sw .sw-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--_sw-ring);
+}
+.sw .sw-btn:disabled, .sw .sw-btn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.sw .sw-btn-primary {
+  --sw-btn-default-bg: var(--sw-primary);
+  --sw-btn-default-border: var(--sw-primary);
+  --sw-btn-default-text: var(--sw-on-primary);
+  --sw-btn-hover-bg: var(--_sw-primary-hover);
+  --sw-btn-hover-border: var(--_sw-primary-hover);
+  --sw-btn-hover-text: var(--sw-on-primary);
+}
+.sw .sw-btn-success {
+  --sw-btn-default-bg: var(--sw-success);
+  --sw-btn-default-border: var(--sw-success);
+  --sw-btn-default-text: var(--sw-on-status);
+  --sw-btn-hover-bg: var(--sw-success);
+  --sw-btn-hover-border: var(--sw-success);
+  --sw-btn-hover-text: var(--sw-on-status);
+}
+.sw .sw-btn-danger {
+  --sw-btn-default-bg: var(--sw-danger);
+  --sw-btn-default-border: var(--sw-danger);
+  --sw-btn-default-text: var(--sw-on-status);
+  --sw-btn-hover-bg: var(--sw-danger);
+  --sw-btn-hover-border: var(--sw-danger);
+  --sw-btn-hover-text: var(--sw-on-status);
+}
+.sw .sw-btn-warning {
+  --sw-btn-default-bg: var(--sw-warning);
+  --sw-btn-default-border: var(--sw-warning);
+  --sw-btn-default-text: var(--sw-on-status);
+  --sw-btn-hover-bg: var(--sw-warning);
+  --sw-btn-hover-border: var(--sw-warning);
+  --sw-btn-hover-text: var(--sw-on-status);
+}
+.sw .sw-btn-info {
+  --sw-btn-default-bg: var(--sw-info);
+  --sw-btn-default-border: var(--sw-info);
+  --sw-btn-default-text: var(--sw-on-status);
+  --sw-btn-hover-bg: var(--sw-info);
+  --sw-btn-hover-border: var(--sw-info);
+  --sw-btn-hover-text: var(--sw-on-status);
+}
+.sw .sw-btn-sm {
+  --sw-btn-padding: 5px 12px;
+  font-size: 12.5px;
+}
+.sw .sw-btn-lg {
+  --sw-btn-padding: 11px 28px;
+  font-size: 15px;
+}
+
+.sw .sw-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  border-radius: var(--sw-radius-lg);
+  background: var(--sw-badge-default-bg);
+  color: var(--sw-badge-default-text);
+  border: 1px solid var(--sw-badge-default-border);
+}
+.sw .sw-badge-primary {
+  --sw-badge-default-bg: var(--sw-primary);
+  --sw-badge-default-text: var(--sw-on-primary);
+  --sw-badge-default-border: var(--_sw-primary-hover);
+}
+.sw .sw-badge-success {
+  --sw-badge-default-bg: var(--sw-success);
+  --sw-badge-default-text: var(--sw-on-status);
+  --sw-badge-default-border: var(--sw-success);
+}
+.sw .sw-badge-danger {
+  --sw-badge-default-bg: var(--sw-danger);
+  --sw-badge-default-text: var(--sw-on-status);
+  --sw-badge-default-border: var(--sw-danger);
+}
+.sw .sw-badge-warning {
+  --sw-badge-default-bg: var(--sw-warning);
+  --sw-badge-default-text: var(--sw-on-status);
+  --sw-badge-default-border: var(--sw-warning);
+}
+.sw .sw-badge-info {
+  --sw-badge-default-bg: var(--sw-info);
+  --sw-badge-default-text: var(--sw-on-status);
+  --sw-badge-default-border: var(--sw-info);
+}
+
+.sw-layout-vertical {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  grid-auto-rows: auto;
+  gap: 0;
+}
+@media screen and (max-width: 640px) {
+  .sw-layout-vertical {
+    grid-template-columns: 1fr;
+  }
+}
+.sw-layout-vertical > .sw-nav {
+  flex-shrink: 0;
+  border-right: var(--sw-border-width) solid var(--sw-border);
+  flex-direction: column;
+  grid-column: 1;
+  overflow-y: auto;
+  position: sticky;
+  top: 0;
+  height: fit-content;
+}
+@media screen and (max-width: 640px) {
+  .sw-layout-vertical > .sw-nav {
+    border-right: none;
+    border-bottom: var(--sw-border-width) solid var(--sw-border);
+    position: relative;
+  }
+}
+.sw-layout-vertical > .sw-nav .sw-nav-item-group {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+.sw-layout-vertical > .sw-nav .sw-nav-item-group > .sw-group-header {
+  justify-content: flex-start;
+  padding: 15px 20px 5px;
+  font-size: 0.75em;
+  color: var(--sw-text);
+  background: transparent;
+  border-right: none;
+}
+.sw-layout-vertical > .sw-nav .sw-nav-item-group > .sw-nav-item {
+  padding-left: 35px;
+}
+.sw-layout-vertical > .sw-nav > .sw-nav-scroll-btn {
+  width: 100%;
+}
+.sw-layout-vertical > .sw-nav > .sw-nav-scroll-btn:before {
+  transform: rotate(90deg);
+}
+.sw-layout-vertical > .sw-nav > .sw-nav-scroll-btn:first-child {
+  top: 0;
+  border-bottom: var(--sw-border-width) solid var(--sw-border);
+  left: auto;
+  border-right: none;
+}
+.sw-layout-vertical > .sw-nav > .sw-nav-scroll-btn:last-child {
+  bottom: 0;
+  border-top: var(--sw-border-width) solid var(--sw-border);
+  right: auto;
+  border-left: none;
+}
+.sw-layout-vertical > .sw-panels {
+  grid-column: 2;
+  min-width: 0;
+}
+@media screen and (max-width: 640px) {
+  .sw-layout-vertical > .sw-panels {
+    grid-column: 1;
+  }
+}
+.sw-layout-vertical > *:not(.sw-nav):not(.sw-panels) {
+  grid-column: 1/-1;
+}
+
+.sw-theme-arrows {
+  --sw-arrow-height: 56px;
+  --sw-arrow-tip: 20px;
+  --sw-arrow-gap: 0px;
+  --sw-min-step-width: 120px;
+  border: 1px solid var(--sw-border);
+}
+.sw-theme-arrows > .sw-nav .sw-nav-item-group:last-of-type .sw-nav-item:last-of-type {
+  margin-right: 0;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
+}
+.sw-theme-arrows > .sw-nav .sw-nav-item-group:first-of-type .sw-nav-item:first-of-type {
+  margin-right: calc(-1 * var(--sw-arrow-tip));
+  padding-left: 14px;
+  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
+}
+.sw-theme-arrows > .sw-nav > *:not(.sw-nav-item-group):last-of-type {
+  margin-right: 0;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
+}
+.sw-theme-arrows > .sw-nav > *:not(.sw-nav-item-group):first-of-type {
+  margin-right: calc(-1 * var(--sw-arrow-tip));
+  padding-left: 14px;
+  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
+}
+.sw-theme-arrows > .sw-nav .sw-nav-item {
+  flex: 1 0 var(--sw-min-step-width);
+  margin-right: calc(-1 * var(--sw-arrow-tip));
+  gap: 10px;
+  min-height: var(--sw-arrow-height);
+  padding: 10px 20px 10px calc(var(--sw-arrow-tip) + 14px);
+  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%);
+}
+@media screen and (max-width: 640px) {
+  .sw-theme-arrows > .sw-nav .sw-nav-item {
+    min-height: unset;
+    overflow: hidden;
+    text-align: left !important;
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+    flex: 1 0 auto;
+    clip-path: none !important;
+    padding: 10px 14px !important;
+  }
+}
+.sw-theme-arrows > .sw-nav .sw-nav-item:only-of-type {
+  margin-right: 0;
+  clip-path: none;
+  border-radius: var(--sw-radius);
+}
+.sw-theme-arrows.sw-layout-vertical > .sw-nav .sw-nav-item {
+  clip-path: none !important;
+  margin-right: 0 !important;
+  padding: 10px calc(var(--sw-arrow-tip) + 14px) !important;
+}
+.sw-theme-arrows.sw-layout-vertical > .sw-nav .sw-nav-item-group .sw-nav-item:first-of-type,
+.sw-theme-arrows.sw-layout-vertical > .sw-nav .sw-nav-item-group .sw-nav-item:last-of-type {
+  clip-path: none !important;
+  margin-right: 0 !important;
+  padding-left: calc(var(--sw-arrow-tip) + 14px) !important;
+}
+.sw-theme-arrows.sw-layout-vertical > .sw-nav > .sw-nav-item:first-of-type, .sw-theme-arrows.sw-layout-vertical > .sw-nav > .sw-nav-item:last-of-type {
+  clip-path: none !important;
+  margin-right: 0 !important;
+  padding-left: calc(var(--sw-arrow-tip) + 14px) !important;
+}
+.sw-theme-arrows[dir=rtl] > .sw-nav .sw-nav-item {
+  margin-right: 0;
+  margin-left: calc(-1 * var(--sw-arrow-tip));
+  padding: 10px calc(var(--sw-arrow-tip) + 14px) 10px 20px;
+  clip-path: polygon(100% 0%, var(--sw-arrow-tip) 0%, 0% 50%, var(--sw-arrow-tip) 100%, 100% 100%, calc(100% - var(--sw-arrow-tip)) 50%);
+}
+@media screen and (max-width: 640px) {
+  .sw-theme-arrows[dir=rtl] > .sw-nav .sw-nav-item {
+    text-align: right !important;
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+    flex: 1 0 auto;
+    clip-path: none !important;
+    padding: 10px 14px !important;
+  }
+}
+.sw-theme-arrows[dir=rtl] > .sw-nav .sw-nav-item:first-of-type {
+  margin-left: calc(-1 * var(--sw-arrow-tip));
+  padding-right: 14px;
+  clip-path: polygon(var(--sw-arrow-tip) 0%, 100% 0%, 100% 100%, var(--sw-arrow-tip) 100%, 0% 50%);
+}
+.sw-theme-arrows[dir=rtl] > .sw-nav .sw-nav-item:last-of-type {
+  margin-left: 0;
+  clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--sw-arrow-tip)) 50%, 100% 100%, 0% 100%);
+}
+.sw-theme-arrows[dir=rtl] > .sw-nav .sw-nav-item:only-of-type {
+  margin-left: 0;
+  clip-path: none;
+  border-radius: var(--sw-radius);
+}
+
+.sw-theme-pills > .sw-nav {
+  padding: 8px 10px;
+  gap: 8px;
+}
+.sw-theme-pills > .sw-nav .sw-nav-item {
+  clip-path: none !important;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  padding: 10px 18px !important;
+}
+.sw-theme-pills > .sw-nav .sw-nav-item.active {
+  border-color: color-mix(in srgb, var(--sw-primary) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-primary) 38%, transparent);
+}
+.sw-theme-pills > .sw-nav .sw-nav-item.completed {
+  border-color: color-mix(in srgb, var(--_sw-primary-tint) 50%, transparent);
+}
+.sw-theme-pills.sw-layout-vertical > .sw-nav .sw-nav-item-group > .sw-nav-item {
+  margin: 5px 0 !important;
+}
+
+/*# sourceMappingURL=smartwizard-full.css.map */