@retoo/borda 0.0.1

package/dist/borda.css

@@ -0,0 +1,925 @@
+.rb {
+  --rb-container-z-index: 10;
+  --rb-button-size-xs: 30px;
+  --rb-button-size-sm: 34px;
+  --rb-button-size-md: 38px;
+  --rb-button-size-lg: 42px;
+  --rb-button-size-xl: 46px;
+  --rb-button-size-xxl: 50px;
+  --rb-button-font-size-xs: 11px;
+  --rb-button-font-size-sm: 12px;
+  --rb-button-font-size-md: 13px;
+  --rb-button-font-size-lg: 14px;
+  --rb-button-font-size-xl: 15px;
+  --rb-button-font-size-xxl: 16px;
+  --rb-button-font-weight: 500;
+  --rb-button-letter-spacing: 0.01em;
+  --rb-button-padding-xs: 0px 8px;
+  --rb-button-padding-sm: 0px 10px;
+  --rb-button-padding-md: 0px 14px;
+  --rb-button-padding-lg: 0px 18px;
+  --rb-button-padding-xl: 0px 22px;
+  --rb-button-padding-xxl: 0px 26px;
+  --rb-button-gap-xs: 4px;
+  --rb-button-gap-sm: 6px;
+  --rb-button-gap-md: 8px;
+  --rb-button-gap-lg: 10px;
+  --rb-button-gap-xl: 12px;
+  --rb-button-gap-xxl: 14px;
+  --rb-button-color: rgb(255, 255, 255);
+  --rb-button-background: rgb(17, 17, 17);
+  --rb-button-background-hover: rgb(38, 38, 38);
+  --rb-button-border: 1px solid transparent;
+  --rb-button-border-radius: 8px;
+  --rb-button-transition: all 0.18s ease;
+  --rb-button-focus-outline: 2px solid rgba(17, 17, 17, 0.35);
+  --rb-button-focus-outline-offset: 2px;
+  --rb-button-outlined-color: rgb(17, 17, 17);
+  --rb-button-outlined-background: transparent;
+  --rb-button-outlined-background-hover: rgba(17, 17, 17, 0.06);
+  --rb-button-outlined-border: 1px solid rgba(17, 17, 17, 0.16);
+  --rb-button-ghost-color: rgba(17, 17, 17, 0.72);
+  --rb-button-ghost-background: transparent;
+  --rb-button-ghost-background-hover: rgba(17, 17, 17, 0.06);
+  --rb-button-ghost-border: 1px solid transparent;
+  --rb-button-text-color: rgba(17, 17, 17, 0.72);
+  --rb-button-text-color-hover: rgb(17, 17, 17);
+  --rb-close-button-size-xs: 22px;
+  --rb-close-button-size-sm: 26px;
+  --rb-close-button-size-md: 28px;
+  --rb-close-button-size-lg: 32px;
+  --rb-close-button-size-xl: 36px;
+  --rb-close-button-size-xxl: 38px;
+  --rb-close-button-icon-size-xs: 12px;
+  --rb-close-button-icon-size-sm: 14px;
+  --rb-close-button-icon-size-md: 16px;
+  --rb-close-button-icon-size-lg: 18px;
+  --rb-close-button-icon-size-xl: 20px;
+  --rb-close-button-icon-size-xxl: 22px;
+  --rb-close-button-color: rgba(17, 17, 17, 0.6);
+  --rb-close-button-color-hover: rgb(17, 17, 17);
+  --rb-close-button-background: transparent;
+  --rb-close-button-background-hover: rgba(17, 17, 17, 0.06);
+  --rb-close-button-background-pressed: rgba(17, 17, 17, 0.1);
+  --rb-close-button-border-radius: 8px;
+  --rb-close-button-transition: all 0.18s ease;
+  --rb-close-button-z-index: 20;
+  --rb-icon-size-xs: 22px;
+  --rb-icon-size-sm: 24px;
+  --rb-icon-size-md: 28px;
+  --rb-icon-size-lg: 32px;
+  --rb-icon-size-xl: 36px;
+  --rb-icon-size-xxl: 40px;
+  --rb-icon-color: rgb(255, 255, 255);
+  --rb-tour-overlay-background: rgba(0, 0, 0, 0.45);
+  --rb-tour-overlay-z-index: 1000;
+  --rb-tour-progress-dot-size: 6px;
+  --rb-tour-progress-dot-gap: 6px;
+  --rb-tour-progress-dot-border-radius: 50%;
+  --rb-tour-progress-dot-color: rgba(17, 17, 17, 0.18);
+  --rb-tour-progress-dot-color-active: rgba(17, 17, 17, 0.9);
+  --rb-tour-progress-text-font-size: 12px;
+  --rb-tour-progress-text-color: rgba(17, 17, 17, 0.55);
+  --rb-tour-progress-line-height: 6px;
+  --rb-tour-progress-line-border-radius: 4px;
+  --rb-tour-progress-line-track-color: rgba(17, 17, 17, 0.08);
+  --rb-tour-progress-line-progress-color: rgba(17, 17, 17, 0.9);
+  --rb-tour-buttons-gap: 8px;
+  --rb-tour-buttons-padding-top: 6px;
+  --rb-tour-skip-gap: 8px;
+  --rb-tour-skip-input-size: 15px;
+  --rb-tour-skip-input-background: rgb(255, 255, 255);
+  --rb-tour-skip-input-border: 1px solid rgba(17, 17, 17, 0.3);
+  --rb-tour-skip-input-border-radius: 4px;
+  --rb-tour-skip-input-check-color: rgb(255, 255, 255);
+  --rb-tour-skip-input-accent: rgba(17, 17, 17, 0.9);
+  --rb-tour-skip-label-font-size: 13px;
+  --rb-tour-skip-label-line-height: 1.4;
+  --rb-tour-skip-label-color: rgba(17, 17, 17, 0.62);
+  --rb-tour-skip-label-color-hover: rgba(17, 17, 17, 0.9);
+  --rb-tour-tooltip-arrow-size: 10px;
+  --rb-tour-tooltip-arrow-inset: 16px;
+  --rb-tour-tooltip-arrow-offset: 50%;
+  --rb-tour-tooltip-gap-xs: 10px;
+  --rb-tour-tooltip-gap-sm: 12px;
+  --rb-tour-tooltip-gap-md: 16px;
+  --rb-tour-tooltip-gap-lg: 20px;
+  --rb-tour-tooltip-gap-xl: 24px;
+  --rb-tour-tooltip-gap-xxl: 28px;
+  --rb-tour-tooltip-header-gap: 12px;
+  --rb-tour-tooltip-min-width-xs: 240px;
+  --rb-tour-tooltip-min-width-sm: 280px;
+  --rb-tour-tooltip-min-width-md: 340px;
+  --rb-tour-tooltip-min-width-lg: 400px;
+  --rb-tour-tooltip-min-width-xl: 460px;
+  --rb-tour-tooltip-min-width-xxl: 520px;
+  --rb-tour-tooltip-max-width: calc(100vw - 32px);
+  --rb-tour-tooltip-padding-xs: 10px;
+  --rb-tour-tooltip-padding-sm: 12px;
+  --rb-tour-tooltip-padding-md: 16px;
+  --rb-tour-tooltip-padding-lg: 20px;
+  --rb-tour-tooltip-padding-xl: 24px;
+  --rb-tour-tooltip-padding-xxl: 28px;
+  --rb-tour-tooltip-close-offset-top: -2px;
+  --rb-tour-tooltip-close-offset-right: -4px;
+  --rb-tour-tooltip-background: rgb(255, 255, 255);
+  --rb-tour-tooltip-border: 1px solid rgba(17, 17, 17, 0.06);
+  --rb-tour-tooltip-border-radius: 14px;
+  --rb-tour-tooltip-title-font-size-xs: 14px;
+  --rb-tour-tooltip-title-font-size-sm: 15px;
+  --rb-tour-tooltip-title-font-size-md: 16px;
+  --rb-tour-tooltip-title-font-size-lg: 18px;
+  --rb-tour-tooltip-title-font-size-xl: 20px;
+  --rb-tour-tooltip-title-font-size-xxl: 22px;
+  --rb-tour-tooltip-title-font-weight: 600;
+  --rb-tour-tooltip-title-line-height: 1.35;
+  --rb-tour-tooltip-title-color: rgba(17, 17, 17, 0.96);
+  --rb-tour-tooltip-description-font-size-xs: 12px;
+  --rb-tour-tooltip-description-font-size-sm: 13px;
+  --rb-tour-tooltip-description-font-size-md: 14px;
+  --rb-tour-tooltip-description-font-size-lg: 15px;
+  --rb-tour-tooltip-description-font-size-xl: 16px;
+  --rb-tour-tooltip-description-font-size-xxl: 17px;
+  --rb-tour-tooltip-description-line-height: 1.5;
+  --rb-tour-tooltip-description-color: rgba(17, 17, 17, 0.62);
+  --rb-tour-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --rb-tour-tooltip-z-index: 1010;
+  --rb-tour-tooltip-animation-duration: 200ms;
+  --rb-tour-tooltip-animation-easing: ease-out;
+  --rb-tour-tooltip-glide-duration: 300ms;
+  --rb-tour-tooltip-glide-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --rb-image-width: 100%;
+  --rb-image-height: auto;
+  --rb-image-border-radius: 10px;
+  --rb-image-object-fit: cover;
+  --rb-image-object-position: center;
+}
+
+.rb-fade-in {
+  animation: rb-fade-in 0.1s ease-out forwards;
+}
+
+@keyframes rb-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.rb-fade-out {
+  animation: rb-fade-out 0.1s ease-out forwards;
+}
+
+@keyframes rb-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.rb-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-family: inherit;
+  font-weight: var(--rb-button-font-weight);
+  letter-spacing: var(--rb-button-letter-spacing);
+  border-radius: var(--rb-button-border-radius);
+  transition: var(--rb-button-transition);
+  box-sizing: border-box;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.rb-button:focus-visible {
+  outline: var(--rb-button-focus-outline);
+  outline-offset: var(--rb-button-focus-outline-offset);
+}
+.rb-button--filled {
+  color: var(--rb-button-color);
+  background: var(--rb-button-background);
+  border: var(--rb-button-border);
+}
+.rb-button--filled:hover {
+  background: var(--rb-button-background-hover);
+}
+.rb-button--outlined {
+  color: var(--rb-button-outlined-color);
+  background: var(--rb-button-outlined-background);
+  border: var(--rb-button-outlined-border);
+}
+.rb-button--outlined:hover {
+  background: var(--rb-button-outlined-background-hover);
+}
+.rb-button--ghost {
+  color: var(--rb-button-ghost-color);
+  background: var(--rb-button-ghost-background);
+  border: var(--rb-button-ghost-border);
+}
+.rb-button--ghost:hover {
+  background: var(--rb-button-ghost-background-hover);
+}
+.rb-button--text {
+  color: var(--rb-button-text-color);
+  background: transparent;
+  border: none;
+}
+.rb-button--text:hover {
+  color: var(--rb-button-text-color-hover);
+}
+.rb-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rb-button--rectangle {
+  max-width: 100%;
+  width: -moz-max-content;
+  width: max-content;
+}
+.rb-button--circle {
+  border-radius: 100%;
+}
+.rb-button.rb-button--xs.rb-button--rectangle {
+  height: var(--rb-button-size-xs);
+}
+.rb-button.rb-button--xs.rb-button--circle, .rb-button.rb-button--xs.rb-button--square {
+  width: var(--rb-button-size-xs);
+  height: var(--rb-button-size-xs);
+}
+.rb-button.rb-button--sm.rb-button--rectangle {
+  height: var(--rb-button-size-sm);
+}
+.rb-button.rb-button--sm.rb-button--circle, .rb-button.rb-button--sm.rb-button--square {
+  width: var(--rb-button-size-sm);
+  height: var(--rb-button-size-sm);
+}
+.rb-button.rb-button--md.rb-button--rectangle {
+  height: var(--rb-button-size-md);
+}
+.rb-button.rb-button--md.rb-button--circle, .rb-button.rb-button--md.rb-button--square {
+  width: var(--rb-button-size-md);
+  height: var(--rb-button-size-md);
+}
+.rb-button.rb-button--lg.rb-button--rectangle {
+  height: var(--rb-button-size-lg);
+}
+.rb-button.rb-button--lg.rb-button--circle, .rb-button.rb-button--lg.rb-button--square {
+  width: var(--rb-button-size-lg);
+  height: var(--rb-button-size-lg);
+}
+.rb-button.rb-button--xl.rb-button--rectangle {
+  height: var(--rb-button-size-xl);
+}
+.rb-button.rb-button--xl.rb-button--circle, .rb-button.rb-button--xl.rb-button--square {
+  width: var(--rb-button-size-xl);
+  height: var(--rb-button-size-xl);
+}
+.rb-button.rb-button--xxl.rb-button--rectangle {
+  height: var(--rb-button-size-xxl);
+}
+.rb-button.rb-button--xxl.rb-button--circle, .rb-button.rb-button--xxl.rb-button--square {
+  width: var(--rb-button-size-xxl);
+  height: var(--rb-button-size-xxl);
+}
+.rb-button.rb-button--xs.rb-button--rectangle {
+  font-size: var(--rb-button-font-size-xs);
+}
+.rb-button.rb-button--sm.rb-button--rectangle {
+  font-size: var(--rb-button-font-size-sm);
+}
+.rb-button.rb-button--md.rb-button--rectangle {
+  font-size: var(--rb-button-font-size-md);
+}
+.rb-button.rb-button--lg.rb-button--rectangle {
+  font-size: var(--rb-button-font-size-lg);
+}
+.rb-button.rb-button--xl.rb-button--rectangle {
+  font-size: var(--rb-button-font-size-xl);
+}
+.rb-button.rb-button--xxl.rb-button--rectangle {
+  font-size: var(--rb-button-font-size-xxl);
+}
+.rb-button.rb-button--xs.rb-button--rectangle {
+  padding: var(--rb-button-padding-xs);
+}
+.rb-button.rb-button--sm.rb-button--rectangle {
+  padding: var(--rb-button-padding-sm);
+}
+.rb-button.rb-button--md.rb-button--rectangle {
+  padding: var(--rb-button-padding-md);
+}
+.rb-button.rb-button--lg.rb-button--rectangle {
+  padding: var(--rb-button-padding-lg);
+}
+.rb-button.rb-button--xl.rb-button--rectangle {
+  padding: var(--rb-button-padding-xl);
+}
+.rb-button.rb-button--xxl.rb-button--rectangle {
+  padding: var(--rb-button-padding-xxl);
+}
+.rb-button.rb-button--xs {
+  gap: var(--rb-button-gap-xs);
+}
+.rb-button.rb-button--sm {
+  gap: var(--rb-button-gap-sm);
+}
+.rb-button.rb-button--md {
+  gap: var(--rb-button-gap-md);
+}
+.rb-button.rb-button--lg {
+  gap: var(--rb-button-gap-lg);
+}
+.rb-button.rb-button--xl {
+  gap: var(--rb-button-gap-xl);
+}
+.rb-button.rb-button--xxl {
+  gap: var(--rb-button-gap-xxl);
+}
+
+.rb-icon {
+  color: var(--rb-icon-color);
+}
+.rb-icon.rb-icon--xs {
+  width: var(--rb-icon-size-xs);
+  height: var(--rb-icon-size-xs);
+}
+.rb-icon.rb-icon--sm {
+  width: var(--rb-icon-size-sm);
+  height: var(--rb-icon-size-sm);
+}
+.rb-icon.rb-icon--md {
+  width: var(--rb-icon-size-md);
+  height: var(--rb-icon-size-md);
+}
+.rb-icon.rb-icon--lg {
+  width: var(--rb-icon-size-lg);
+  height: var(--rb-icon-size-lg);
+}
+.rb-icon.rb-icon--xl {
+  width: var(--rb-icon-size-xl);
+  height: var(--rb-icon-size-xl);
+}
+.rb-icon.rb-icon--xxl {
+  width: var(--rb-icon-size-xxl);
+  height: var(--rb-icon-size-xxl);
+}
+
+.rb-image {
+  display: block;
+  width: var(--rb-image-width);
+  height: var(--rb-image-height);
+  max-width: 100%;
+  border-radius: var(--rb-image-border-radius);
+  -o-object-fit: var(--rb-image-object-fit);
+     object-fit: var(--rb-image-object-fit);
+  -o-object-position: var(--rb-image-object-position);
+     object-position: var(--rb-image-object-position);
+}
+
+.rb-progress {
+  z-index: 10;
+}
+.rb-progress:focus {
+  outline: none;
+}
+.rb-progress .rb-progress__track {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  cursor: pointer;
+}
+.rb-progress .rb-progress__buffer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  cursor: pointer;
+  z-index: 11;
+}
+.rb-progress .rb-progress__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  cursor: pointer;
+  z-index: 12;
+}
+
+.rb-progress--line {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  touch-action: none;
+}
+.rb-progress--line .rb-progress__track {
+  transition: height 0.3s linear;
+}
+.rb-progress--line .rb-progress__buffer {
+  transition: width 0.1s linear;
+  overflow: hidden;
+}
+.rb-progress--line .rb-progress__progress {
+  transition: width 0.1s linear;
+  overflow: hidden;
+}
+
+.rb {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.rb-container--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.rb-close-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rb-close-button-border-radius);
+  transition: var(--rb-close-button-transition);
+  z-index: var(--rb-close-button-z-index);
+}
+.rb-close-button.rb-close-button--xs {
+  width: var(--rb-close-button-size-xs);
+  height: var(--rb-close-button-size-xs);
+}
+.rb-close-button.rb-close-button--sm {
+  width: var(--rb-close-button-size-sm);
+  height: var(--rb-close-button-size-sm);
+}
+.rb-close-button.rb-close-button--md {
+  width: var(--rb-close-button-size-md);
+  height: var(--rb-close-button-size-md);
+}
+.rb-close-button.rb-close-button--lg {
+  width: var(--rb-close-button-size-lg);
+  height: var(--rb-close-button-size-lg);
+}
+.rb-close-button.rb-close-button--xl {
+  width: var(--rb-close-button-size-xl);
+  height: var(--rb-close-button-size-xl);
+}
+.rb-close-button.rb-close-button--xxl {
+  width: var(--rb-close-button-size-xxl);
+  height: var(--rb-close-button-size-xxl);
+}
+.rb-close-button .rb-button {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  color: var(--rb-close-button-color);
+  background: var(--rb-close-button-background);
+  border: none;
+}
+.rb-close-button .rb-button:hover {
+  color: var(--rb-close-button-color-hover);
+  background: var(--rb-close-button-background-hover);
+}
+.rb-close-button .rb-button:active {
+  background: var(--rb-close-button-background-pressed);
+}
+.rb-close-button .rb-button .rb-icon {
+  color: currentColor;
+  --rb-icon-size-xs: var(--rb-close-button-icon-size-xs);
+  --rb-icon-size-sm: var(--rb-close-button-icon-size-sm);
+  --rb-icon-size-md: var(--rb-close-button-icon-size-md);
+  --rb-icon-size-lg: var(--rb-close-button-icon-size-lg);
+  --rb-icon-size-xl: var(--rb-close-button-icon-size-xl);
+  --rb-icon-size-xxl: var(--rb-close-button-icon-size-xxl);
+}
+
+.rb-container--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rb-container--hidden * {
+  pointer-events: none;
+}
+
+.rb-tour-image--bleed {
+  width: calc(100% + var(--rb-tour-tooltip-padding) * 2);
+  max-width: none;
+  margin: calc(var(--rb-tour-tooltip-padding) * -1) calc(var(--rb-tour-tooltip-padding) * -1) 0;
+  border-radius: var(--rb-tour-tooltip-border-radius) var(--rb-tour-tooltip-border-radius) 0 0;
+}
+
+.rb-tour-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: var(--rb-tour-overlay-z-index);
+  animation: rb-fade-in 0.15s ease-out;
+}
+.rb-tour-overlay__backdrop {
+  fill: var(--rb-tour-overlay-background);
+  pointer-events: all;
+}
+.rb-tour-overlay__backdrop--transitioning {
+  transition: d 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.rb-tour-skip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-tour-skip-gap);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.rb-tour-skip__input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  display: inline-grid;
+  place-content: center;
+  width: var(--rb-tour-skip-input-size);
+  height: var(--rb-tour-skip-input-size);
+  margin: 0;
+  background-color: var(--rb-tour-skip-input-background);
+  border: var(--rb-tour-skip-input-border);
+  border-radius: var(--rb-tour-skip-input-border-radius);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+.rb-tour-skip__input::before {
+  content: "";
+  width: calc(var(--rb-tour-skip-input-size) * 0.6);
+  height: calc(var(--rb-tour-skip-input-size) * 0.6);
+  transform: scale(0);
+  transition: transform 0.12s ease-in-out;
+  box-shadow: inset 1rem 1rem var(--rb-tour-skip-input-check-color);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+.rb-tour-skip__input:checked {
+  background-color: var(--rb-tour-skip-input-accent);
+  border-color: var(--rb-tour-skip-input-accent);
+}
+.rb-tour-skip__input:checked::before {
+  transform: scale(1);
+}
+.rb-tour-skip__input:focus-visible {
+  outline: 2px solid var(--rb-tour-skip-input-accent);
+  outline-offset: 2px;
+}
+.rb-tour-skip__label {
+  font-size: var(--rb-tour-skip-label-font-size);
+  line-height: var(--rb-tour-skip-label-line-height);
+  color: var(--rb-tour-skip-label-color);
+}
+.rb-tour-skip:hover .rb-tour-skip__label {
+  color: var(--rb-tour-skip-label-color-hover);
+}
+.rb-tour-skip:has(.rb-tour-skip__input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.rb-tour-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rb-tour-progress .rb-progress {
+  position: static;
+  width: auto;
+  height: auto;
+  pointer-events: none;
+  z-index: auto;
+}
+.rb-tour-progress .rb-progress--line {
+  width: 100%;
+}
+.rb-tour-progress .rb-progress--line .rb-progress {
+  width: 100%;
+}
+.rb-tour-progress .rb-progress--line .rb-progress__track {
+  height: var(--rb-tour-progress-line-height);
+  background: var(--rb-tour-progress-line-track-color);
+  border-radius: var(--rb-tour-progress-line-border-radius);
+}
+.rb-tour-progress .rb-progress--line .rb-progress__progress {
+  background: var(--rb-tour-progress-line-progress-color);
+  border-radius: var(--rb-tour-progress-line-border-radius);
+}
+
+.rb-progress--dots {
+  display: flex;
+  align-items: center;
+  gap: var(--rb-tour-progress-dot-gap);
+}
+.rb-progress--dots .rb-progress__item {
+  width: var(--rb-tour-progress-dot-size);
+  height: var(--rb-tour-progress-dot-size);
+  background: var(--rb-tour-progress-dot-color);
+  border-radius: var(--rb-tour-progress-dot-border-radius);
+}
+.rb-progress--dots .rb-progress__item--active {
+  background: var(--rb-tour-progress-dot-color-active);
+}
+
+.rb-progress--text .rb-progress__item {
+  font-size: var(--rb-tour-progress-text-font-size);
+  color: var(--rb-tour-progress-text-color);
+}
+
+@keyframes rb-tt-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes rb-tt-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes rb-tt-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes rb-tt-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+}
+@keyframes rb-tt-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes rb-tt-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+.rb-tour-tooltip {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  max-width: var(--rb-tour-tooltip-max-width);
+  background: var(--rb-tour-tooltip-background);
+  border: var(--rb-tour-tooltip-border);
+  border-radius: var(--rb-tour-tooltip-border-radius);
+  box-shadow: var(--rb-tour-tooltip-shadow);
+  z-index: var(--rb-tour-tooltip-z-index);
+  box-sizing: border-box;
+  will-change: opacity, transform;
+  isolation: isolate;
+}
+.rb-tour-tooltip.rb-tour-tooltip--xs {
+  gap: var(--rb-tour-tooltip-gap-xs);
+}
+.rb-tour-tooltip.rb-tour-tooltip--sm {
+  gap: var(--rb-tour-tooltip-gap-sm);
+}
+.rb-tour-tooltip.rb-tour-tooltip--md {
+  gap: var(--rb-tour-tooltip-gap-md);
+}
+.rb-tour-tooltip.rb-tour-tooltip--lg {
+  gap: var(--rb-tour-tooltip-gap-lg);
+}
+.rb-tour-tooltip.rb-tour-tooltip--xl {
+  gap: var(--rb-tour-tooltip-gap-xl);
+}
+.rb-tour-tooltip.rb-tour-tooltip--xxl {
+  gap: var(--rb-tour-tooltip-gap-xxl);
+}
+.rb-tour-tooltip.rb-tour-tooltip--xs {
+  padding: var(--rb-tour-tooltip-padding-xs);
+}
+.rb-tour-tooltip.rb-tour-tooltip--sm {
+  padding: var(--rb-tour-tooltip-padding-sm);
+}
+.rb-tour-tooltip.rb-tour-tooltip--md {
+  padding: var(--rb-tour-tooltip-padding-md);
+}
+.rb-tour-tooltip.rb-tour-tooltip--lg {
+  padding: var(--rb-tour-tooltip-padding-lg);
+}
+.rb-tour-tooltip.rb-tour-tooltip--xl {
+  padding: var(--rb-tour-tooltip-padding-xl);
+}
+.rb-tour-tooltip.rb-tour-tooltip--xxl {
+  padding: var(--rb-tour-tooltip-padding-xxl);
+}
+.rb-tour-tooltip.rb-tour-tooltip--xs {
+  min-width: min(var(--rb-tour-tooltip-min-width-xs), var(--rb-tour-tooltip-max-width));
+}
+.rb-tour-tooltip.rb-tour-tooltip--sm {
+  min-width: min(var(--rb-tour-tooltip-min-width-sm), var(--rb-tour-tooltip-max-width));
+}
+.rb-tour-tooltip.rb-tour-tooltip--md {
+  min-width: min(var(--rb-tour-tooltip-min-width-md), var(--rb-tour-tooltip-max-width));
+}
+.rb-tour-tooltip.rb-tour-tooltip--lg {
+  min-width: min(var(--rb-tour-tooltip-min-width-lg), var(--rb-tour-tooltip-max-width));
+}
+.rb-tour-tooltip.rb-tour-tooltip--xl {
+  min-width: min(var(--rb-tour-tooltip-min-width-xl), var(--rb-tour-tooltip-max-width));
+}
+.rb-tour-tooltip.rb-tour-tooltip--xxl {
+  min-width: min(var(--rb-tour-tooltip-min-width-xxl), var(--rb-tour-tooltip-max-width));
+}
+.rb-tour-tooltip--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rb-tour-tooltip--glide {
+  transition: top var(--rb-tour-tooltip-glide-duration) var(--rb-tour-tooltip-glide-easing), left var(--rb-tour-tooltip-glide-duration) var(--rb-tour-tooltip-glide-easing);
+}
+.rb-tour-tooltip--anim-out {
+  pointer-events: none;
+}
+.rb-tour-tooltip--anim-fade.rb-tour-tooltip--anim-in {
+  animation: rb-tt-fade-in var(--rb-tour-tooltip-animation-duration) var(--rb-tour-tooltip-animation-easing) forwards;
+}
+.rb-tour-tooltip--anim-fade.rb-tour-tooltip--anim-out {
+  animation: rb-tt-fade-out var(--rb-tour-tooltip-animation-duration) var(--rb-tour-tooltip-animation-easing) forwards;
+}
+.rb-tour-tooltip--anim-scale {
+  transform-origin: center center;
+}
+.rb-tour-tooltip--anim-scale.rb-tour-tooltip--anim-in {
+  animation: rb-tt-scale-in var(--rb-tour-tooltip-animation-duration) var(--rb-tour-tooltip-animation-easing) forwards;
+}
+.rb-tour-tooltip--anim-scale.rb-tour-tooltip--anim-out {
+  animation: rb-tt-scale-out var(--rb-tour-tooltip-animation-duration) var(--rb-tour-tooltip-animation-easing) forwards;
+}
+.rb-tour-tooltip--anim-slide.rb-tour-tooltip--anim-in {
+  animation: rb-tt-slide-in var(--rb-tour-tooltip-animation-duration) var(--rb-tour-tooltip-animation-easing) forwards;
+}
+.rb-tour-tooltip--anim-slide.rb-tour-tooltip--anim-out {
+  animation: rb-tt-slide-out var(--rb-tour-tooltip-animation-duration) var(--rb-tour-tooltip-animation-easing) forwards;
+}
+.rb-tour-tooltip__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--rb-tour-tooltip-header-gap);
+}
+.rb-tour-tooltip__header .rb-close-button {
+  position: static;
+  flex-shrink: 0;
+  margin-top: var(--rb-tour-tooltip-close-offset-top);
+  margin-right: var(--rb-tour-tooltip-close-offset-right);
+}
+.rb-tour-tooltip__title {
+  margin: 0;
+  font-weight: var(--rb-tour-tooltip-title-font-weight);
+  line-height: var(--rb-tour-tooltip-title-line-height);
+  color: var(--rb-tour-tooltip-title-color);
+}
+.rb-tour-tooltip--xs .rb-tour-tooltip__title {
+  font-size: var(--rb-tour-tooltip-title-font-size-xs);
+}
+.rb-tour-tooltip--sm .rb-tour-tooltip__title {
+  font-size: var(--rb-tour-tooltip-title-font-size-sm);
+}
+.rb-tour-tooltip--md .rb-tour-tooltip__title {
+  font-size: var(--rb-tour-tooltip-title-font-size-md);
+}
+.rb-tour-tooltip--lg .rb-tour-tooltip__title {
+  font-size: var(--rb-tour-tooltip-title-font-size-lg);
+}
+.rb-tour-tooltip--xl .rb-tour-tooltip__title {
+  font-size: var(--rb-tour-tooltip-title-font-size-xl);
+}
+.rb-tour-tooltip--xxl .rb-tour-tooltip__title {
+  font-size: var(--rb-tour-tooltip-title-font-size-xxl);
+}
+.rb-tour-tooltip__description {
+  margin: 0;
+  line-height: var(--rb-tour-tooltip-description-line-height);
+  color: var(--rb-tour-tooltip-description-color);
+}
+.rb-tour-tooltip--xs .rb-tour-tooltip__description {
+  font-size: var(--rb-tour-tooltip-description-font-size-xs);
+}
+.rb-tour-tooltip--sm .rb-tour-tooltip__description {
+  font-size: var(--rb-tour-tooltip-description-font-size-sm);
+}
+.rb-tour-tooltip--md .rb-tour-tooltip__description {
+  font-size: var(--rb-tour-tooltip-description-font-size-md);
+}
+.rb-tour-tooltip--lg .rb-tour-tooltip__description {
+  font-size: var(--rb-tour-tooltip-description-font-size-lg);
+}
+.rb-tour-tooltip--xl .rb-tour-tooltip__description {
+  font-size: var(--rb-tour-tooltip-description-font-size-xl);
+}
+.rb-tour-tooltip--xxl .rb-tour-tooltip__description {
+  font-size: var(--rb-tour-tooltip-description-font-size-xxl);
+}
+.rb-tour-tooltip .rb-progress--line {
+  width: 100%;
+}
+
+.rb-tour-tooltip__arrow {
+  position: absolute;
+  width: var(--rb-tour-tooltip-arrow-size);
+  height: var(--rb-tour-tooltip-arrow-size);
+  background: var(--rb-tour-tooltip-background);
+  box-shadow: var(--rb-tour-tooltip-shadow);
+  transform: rotate(45deg);
+  z-index: -1;
+}
+.rb-tour-tooltip__arrow--top, .rb-tour-tooltip__arrow--bottom {
+  left: clamp(var(--rb-tour-tooltip-arrow-inset), var(--rb-tour-tooltip-arrow-offset), 100% - var(--rb-tour-tooltip-arrow-inset));
+  translate: -50% 0;
+}
+.rb-tour-tooltip__arrow--left, .rb-tour-tooltip__arrow--right {
+  top: clamp(var(--rb-tour-tooltip-arrow-inset), var(--rb-tour-tooltip-arrow-offset), 100% - var(--rb-tour-tooltip-arrow-inset));
+  translate: 0 -50%;
+}
+.rb-tour-tooltip__arrow--top {
+  top: calc(var(--rb-tour-tooltip-arrow-size) / -2);
+}
+.rb-tour-tooltip__arrow--bottom {
+  bottom: calc(var(--rb-tour-tooltip-arrow-size) / -2);
+}
+.rb-tour-tooltip__arrow--left {
+  left: calc(var(--rb-tour-tooltip-arrow-size) / -2);
+}
+.rb-tour-tooltip__arrow--right {
+  right: calc(var(--rb-tour-tooltip-arrow-size) / -2);
+}
+
+.rb-tour-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--rb-tour-buttons-gap);
+  padding-top: var(--rb-tour-buttons-padding-top);
+}
+.rb-tour-buttons__center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.rb-tour-buttons__center .rb-progress {
+  position: static;
+  height: auto;
+  pointer-events: none;
+  z-index: auto;
+}
+.rb-tour-buttons__center .rb-progress--dots,
+.rb-tour-buttons__center .rb-progress--text {
+  width: auto;
+}
+.rb-tour-buttons__next, .rb-tour-buttons__skip {
+  margin-left: auto;
+}
+.rb-tour-buttons__next ~ .rb-tour-buttons__skip, .rb-tour-buttons__skip ~ .rb-tour-buttons__next {
+  margin-left: 0;
+}
+
+.rb-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;
+}
+/*# sourceMappingURL=borda.css.map */