@tokis/theme 1.0.0

package/src/components/extended.css

@@ -0,0 +1,663 @@
+/* ============================================================
+   Tokis — Extended Components
+   Supplemental components and layout utilities
+   ============================================================ */
+
+/* ── Button Group ───────────────────────────────────────────── */
+
+.tokis-button-group {
+  display: inline-flex;
+  gap: 0;
+}
+.tokis-button-group > .tokis-btn {
+  border-radius: 0;
+}
+.tokis-button-group > .tokis-btn:first-child {
+  border-radius: var(--tokis-radius-md) 0 0 var(--tokis-radius-md);
+}
+.tokis-button-group > .tokis-btn:last-child {
+  border-radius: 0 var(--tokis-radius-md) var(--tokis-radius-md) 0;
+}
+.tokis-button-group > .tokis-btn--secondary + .tokis-btn--secondary {
+  border-left-color: transparent;
+}
+.tokis-button-group--vertical {
+  flex-direction: column;
+}
+.tokis-button-group--vertical > .tokis-btn {
+  border-radius: 0;
+  width: 100%;
+}
+.tokis-button-group--vertical > .tokis-btn:first-child {
+  border-radius: var(--tokis-radius-md) var(--tokis-radius-md) 0 0;
+}
+.tokis-button-group--vertical > .tokis-btn:last-child {
+  border-radius: 0 0 var(--tokis-radius-md) var(--tokis-radius-md);
+}
+
+/* ── FAB (Floating Action Button) ───────────────────────────── */
+
+.tokis-fab {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--tokis-radius-full);
+  box-shadow: var(--tokis-shadow-lg);
+  font-size: 20px;
+  position: fixed;
+  bottom: var(--tokis-spacing-6);
+  right: var(--tokis-spacing-6);
+  z-index: var(--tokis-z-raised);
+}
+.tokis-fab:hover {
+  box-shadow: var(--tokis-shadow-xl);
+  transform: translateY(-2px);
+}
+
+/* ── Toggle Group ───────────────────────────────────────────── */
+
+.tokis-toggle-group {
+  display: inline-flex;
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-md);
+  overflow: hidden;
+  background: var(--tokis-color-surface-raised);
+}
+.tokis-toggle-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tokis-spacing-2);
+  border: 0;
+  border-right: 1px solid var(--tokis-color-border);
+  background: transparent;
+  color: var(--tokis-text-secondary);
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-3);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background var(--tokis-duration-fast) var(--tokis-ease-out),
+    color var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+.tokis-toggle-button:last-child { border-right: 0; }
+.tokis-toggle-button:hover { background: var(--tokis-color-surface-hover); color: var(--tokis-text-primary); }
+.tokis-toggle-button:focus-visible { box-shadow: 0 0 0 2px inset var(--tokis-color-focus-ring); }
+.tokis-toggle-button--selected {
+  background: var(--tokis-color-primary-subtle);
+  color: var(--tokis-color-primary);
+}
+.tokis-toggle-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+
+/* ── Stepper ────────────────────────────────────────────────── */
+
+.tokis-stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.tokis-stepper--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.tokis-step {
+  display: flex;
+  gap: var(--tokis-spacing-3);
+  color: var(--tokis-text-secondary);
+  position: relative;
+  padding-bottom: var(--tokis-spacing-6);
+}
+.tokis-step:last-child { padding-bottom: 0; }
+.tokis-step--active  { color: var(--tokis-text-primary); }
+.tokis-step--done    { color: var(--tokis-text-secondary); }
+
+.tokis-step-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+.tokis-step-index {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--tokis-radius-full);
+  background: var(--tokis-color-neutral-200);
+  color: var(--tokis-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tokis-font-size-xs);
+  font-weight: var(--tokis-font-weight-semibold);
+  flex-shrink: 0;
+  transition:
+    background var(--tokis-duration-fast) var(--tokis-ease-out),
+    color var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+.tokis-step--active .tokis-step-index {
+  background: var(--tokis-color-primary);
+  color: var(--tokis-text-on-primary);
+}
+.tokis-step--done .tokis-step-index {
+  background: var(--tokis-color-success);
+  color: var(--tokis-text-inverse);
+}
+
+.tokis-step-connector {
+  width: 1px;
+  flex: 1;
+  background: var(--tokis-color-border);
+  margin: var(--tokis-spacing-1) 0;
+  min-height: 20px;
+}
+.tokis-step--done .tokis-step-connector {
+  background: var(--tokis-color-success);
+}
+
+.tokis-step-content { flex: 1; padding-top: 3px; min-width: 0; }
+.tokis-step-label {
+  font-weight: var(--tokis-font-weight-medium);
+  font-size: var(--tokis-font-size-sm);
+  line-height: 1.5;
+}
+.tokis-step-description {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-secondary);
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+/* ── Autocomplete ───────────────────────────────────────────── */
+
+.tokis-autocomplete {
+  position: relative;
+  width: 100%;
+}
+.tokis-autocomplete-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--tokis-color-surface-overlay);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-lg);
+  box-shadow: var(--tokis-shadow-xl);
+  z-index: var(--tokis-z-dropdown);
+  overflow: hidden;
+  animation: tokis-dropdown-in var(--tokis-duration-fast) var(--tokis-ease-out);
+  max-height: 240px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tokis-color-border) transparent;
+}
+.tokis-autocomplete-item {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-3);
+  cursor: pointer;
+  color: var(--tokis-text-primary);
+  font-size: var(--tokis-font-size-sm);
+  font-family: inherit;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
+.tokis-autocomplete-item:hover,
+.tokis-autocomplete-item[data-focused="true"] { background: var(--tokis-color-surface-hover); }
+.tokis-autocomplete-item:focus-visible { background: var(--tokis-color-surface-hover); }
+
+/* ── Rating ─────────────────────────────────────────────────── */
+
+.tokis-rating {
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+}
+.tokis-rating-star {
+  border: 0;
+  background: transparent;
+  color: var(--tokis-color-neutral-300);
+  cursor: pointer;
+  transition:
+    color var(--tokis-duration-fast) var(--tokis-ease-out),
+    transform var(--tokis-duration-fast) var(--tokis-ease-spring);
+  outline: none;
+  line-height: 1;
+  padding: 2px;
+  display: inline-flex;
+  align-items: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.tokis-rating-star:hover { color: var(--tokis-color-warning); transform: scale(1.15); }
+.tokis-rating-star--active { color: var(--tokis-color-warning); }
+.tokis-rating-star--hover { transform: scale(1.15); }
+.tokis-rating-star:focus-visible {
+  box-shadow: 0 0 0 2px var(--tokis-color-focus-ring);
+  border-radius: var(--tokis-radius-sm);
+  outline: none;
+}
+.tokis-rating--readonly .tokis-rating-star,
+.tokis-rating[data-readonly="true"] .tokis-rating-star { cursor: default; pointer-events: none; }
+
+/* ── OTP Input ──────────────────────────────────────────────── */
+
+.tokis-otp-root {
+  display: inline-block;
+}
+
+.tokis-otp-inputs {
+  display: flex;
+  gap: var(--tokis-spacing-2);
+  align-items: center;
+}
+
+.tokis-otp-cell {
+  width: 44px;
+  height: 52px;
+  text-align: center;
+  font-size: var(--tokis-font-size-xl);
+  font-weight: var(--tokis-font-weight-semibold);
+  font-family: var(--tokis-font-family-mono);
+  border: 1.5px solid var(--tokis-color-border-strong);
+  border-radius: var(--tokis-radius-lg);
+  background: var(--tokis-color-surface-raised);
+  color: var(--tokis-text-primary);
+  transition:
+    border-color var(--tokis-duration-fast) var(--tokis-ease-out),
+    box-shadow var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  caret-color: var(--tokis-color-primary);
+}
+
+.tokis-otp-cell:focus {
+  border-color: var(--tokis-color-primary);
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+.tokis-otp-cell--filled {
+  border-color: var(--tokis-color-primary);
+  background: var(--tokis-color-primary-subtle);
+}
+
+.tokis-otp-cell--error {
+  border-color: var(--tokis-color-error);
+}
+
+.tokis-otp-cell--error:focus {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring-error);
+}
+
+.tokis-otp-cell:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--tokis-color-surface);
+}
+
+/* ── File Drop Zone ─────────────────────────────────────────── */
+
+.tokis-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tokis-spacing-2);
+  padding: var(--tokis-spacing-8) var(--tokis-spacing-6);
+  border: 2px dashed var(--tokis-color-border-strong);
+  border-radius: var(--tokis-radius-xl);
+  background: var(--tokis-color-surface);
+  cursor: pointer;
+  text-align: center;
+  transition:
+    border-color var(--tokis-duration-normal) var(--tokis-ease-out),
+    background var(--tokis-duration-normal) var(--tokis-ease-out);
+  outline: none;
+  min-height: 140px;
+}
+
+.tokis-dropzone:focus-visible {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+  border-color: var(--tokis-color-primary);
+}
+
+.tokis-dropzone:hover,
+.tokis-dropzone--dragging {
+  border-color: var(--tokis-color-primary);
+  background: var(--tokis-color-primary-subtle);
+}
+
+.tokis-dropzone--error {
+  border-color: var(--tokis-color-error);
+  background: var(--tokis-color-error-subtle);
+}
+
+.tokis-dropzone--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tokis-dropzone__icon {
+  color: var(--tokis-text-tertiary);
+  transition: color var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+
+.tokis-dropzone:hover .tokis-dropzone__icon,
+.tokis-dropzone--dragging .tokis-dropzone__icon {
+  color: var(--tokis-color-primary);
+}
+
+.tokis-dropzone__label {
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-medium);
+  color: var(--tokis-text-primary);
+}
+
+.tokis-dropzone__hint {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-text-tertiary);
+}
+
+.tokis-dropzone__error {
+  font-size: var(--tokis-font-size-xs);
+  color: var(--tokis-color-error);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+.tokis-dropzone__files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tokis-spacing-1);
+  justify-content: center;
+}
+
+.tokis-dropzone__file {
+  font-size: var(--tokis-font-size-xs);
+  padding: 2px var(--tokis-spacing-2);
+  background: var(--tokis-color-primary-subtle);
+  color: var(--tokis-color-primary);
+  border-radius: var(--tokis-radius-full);
+  font-weight: var(--tokis-font-weight-medium);
+}
+
+/* ── App Bar ────────────────────────────────────────────────── */
+
+.tokis-app-bar {
+  width: 100%;
+  min-height: 56px;
+  background: var(--tokis-color-surface-raised);
+  border-bottom: 1px solid var(--tokis-color-border);
+  color: var(--tokis-text-primary);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--tokis-spacing-4);
+  gap: var(--tokis-spacing-3);
+  box-shadow: var(--tokis-shadow-xs);
+}
+.tokis-app-bar--sticky { position: sticky; top: 0; z-index: var(--tokis-z-sticky); }
+.tokis-app-bar--fixed  { position: fixed;  top: 0; left: 0; right: 0; z-index: var(--tokis-z-sticky); }
+
+.tokis-app-bar__title {
+  font-size: var(--tokis-font-size-lg);
+  font-weight: var(--tokis-font-weight-semibold);
+  color: var(--tokis-text-primary);
+  flex: 1;
+}
+.tokis-app-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  margin-left: auto;
+}
+
+/* ── Paper / Surface ────────────────────────────────────────── */
+
+.tokis-paper {
+  background: var(--tokis-color-surface-raised);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-lg);
+  padding: var(--tokis-spacing-4);
+}
+.tokis-paper--1 { box-shadow: var(--tokis-shadow-sm); border-color: transparent; }
+.tokis-paper--2 { box-shadow: var(--tokis-shadow-md); border-color: transparent; }
+.tokis-paper--3 { box-shadow: var(--tokis-shadow-lg); border-color: transparent; }
+
+/* ── Bottom Nav ─────────────────────────────────────────────── */
+
+.tokis-bottom-nav {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
+  gap: var(--tokis-spacing-1);
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-2);
+  border-top: 1px solid var(--tokis-color-border);
+  background: var(--tokis-color-surface-raised);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--tokis-z-sticky);
+}
+.tokis-bottom-nav-item {
+  border: 0;
+  border-radius: var(--tokis-radius-md);
+  background: transparent;
+  color: var(--tokis-text-secondary);
+  min-height: 52px;
+  font-size: var(--tokis-font-size-xs);
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: color var(--tokis-duration-fast) var(--tokis-ease-out), background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.tokis-bottom-nav-item:hover { background: var(--tokis-color-surface-hover); }
+.tokis-bottom-nav-item:focus-visible { box-shadow: 0 0 0 2px inset var(--tokis-color-focus-ring); }
+.tokis-bottom-nav-item--active {
+  color: var(--tokis-color-primary);
+  background: var(--tokis-color-primary-subtle);
+}
+
+/* ── Speed Dial ─────────────────────────────────────────────── */
+
+.tokis-speed-dial {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--tokis-spacing-2);
+}
+.tokis-speed-dial-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-2);
+  animation: tokis-dropdown-in var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+.tokis-speed-dial-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-full);
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-4);
+  background: var(--tokis-color-surface-raised);
+  cursor: pointer;
+  font-size: var(--tokis-font-size-sm);
+  font-family: inherit;
+  box-shadow: var(--tokis-shadow-md);
+  color: var(--tokis-text-primary);
+  transition: box-shadow var(--tokis-duration-fast) var(--tokis-ease-out), transform var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  white-space: nowrap;
+}
+.tokis-speed-dial-action:hover {
+  box-shadow: var(--tokis-shadow-lg);
+  transform: scale(1.02);
+}
+.tokis-speed-dial-action:focus-visible {
+  box-shadow: 0 0 0 3px var(--tokis-color-focus-ring);
+}
+
+/* ── Backdrop ───────────────────────────────────────────────── */
+
+.tokis-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(0 0 0 / 0.45);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  display: grid;
+  place-items: center;
+  z-index: var(--tokis-z-modal);
+}
+
+/* ── Fade transition helper ─────────────────────────────────── */
+
+.tokis-fade {
+  opacity: 0;
+  transform: translateY(6px);
+  transition:
+    opacity var(--tokis-duration-normal) var(--tokis-ease-out),
+    transform var(--tokis-duration-normal) var(--tokis-ease-out);
+}
+.tokis-fade--in {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ── Number Field ───────────────────────────────────────────── */
+
+.tokis-number-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-2);
+}
+.tokis-number-field-wrapper {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+}
+.tokis-number-field .tokis-input {
+  border-radius: 0;
+  text-align: center;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.tokis-number-field-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background: var(--tokis-color-surface-raised);
+  border: 1px solid var(--tokis-color-border);
+  color: var(--tokis-text-secondary);
+  cursor: pointer;
+  font-size: 16px;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+.tokis-number-field-btn:first-child { border-radius: var(--tokis-radius-md) 0 0 var(--tokis-radius-md); }
+.tokis-number-field-btn:last-child  { border-radius: 0 var(--tokis-radius-md) var(--tokis-radius-md) 0; }
+.tokis-number-field-btn:hover { background: var(--tokis-color-surface-hover); color: var(--tokis-text-primary); }
+.tokis-number-field-btn:focus-visible { box-shadow: 0 0 0 2px inset var(--tokis-color-focus-ring); }
+
+/* ── Transfer List ──────────────────────────────────────────── */
+
+.tokis-transfer-list {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--tokis-spacing-3);
+  align-items: center;
+}
+.tokis-transfer-pane {
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-lg);
+  overflow: hidden;
+  min-width: 200px;
+}
+.tokis-transfer-pane-header {
+  padding: var(--tokis-spacing-3) var(--tokis-spacing-4);
+  font-size: var(--tokis-font-size-sm);
+  font-weight: var(--tokis-font-weight-semibold);
+  color: var(--tokis-text-primary);
+  border-bottom: 1px solid var(--tokis-color-border);
+  background: var(--tokis-color-neutral-50);
+}
+.tokis-transfer-item {
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  padding: var(--tokis-spacing-2) var(--tokis-spacing-4);
+  font-size: var(--tokis-font-size-sm);
+  color: var(--tokis-text-primary);
+  cursor: pointer;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+.tokis-transfer-item:hover { background: var(--tokis-color-surface-hover); }
+.tokis-transfer-item--selected { background: var(--tokis-color-primary-subtle); color: var(--tokis-color-primary); }
+.tokis-transfer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tokis-spacing-2);
+}
+
+/* ── Tree View ──────────────────────────────────────────────── */
+
+.tokis-tree-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.tokis-tree-list--nested {
+  padding-left: var(--tokis-spacing-4);
+}
+.tokis-tree-item {
+  border: 0;
+  background: transparent;
+  color: var(--tokis-text-primary);
+  font-size: var(--tokis-font-size-sm);
+  font-family: inherit;
+  padding: var(--tokis-spacing-1) var(--tokis-spacing-2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--tokis-spacing-2);
+  border-radius: var(--tokis-radius-sm);
+  width: 100%;
+  text-align: left;
+  transition: background var(--tokis-duration-fast) var(--tokis-ease-out);
+  outline: none;
+}
+.tokis-tree-item:hover { background: var(--tokis-color-surface-hover); }
+.tokis-tree-item[aria-selected="true"] { background: var(--tokis-color-primary-subtle); color: var(--tokis-color-primary); }
+.tokis-tree-item:focus-visible { box-shadow: 0 0 0 2px var(--tokis-color-focus-ring); }
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-toggle-button { transition: none; }
+  .tokis-rating-star   { transition: none; transform: none !important; }
+  .tokis-bottom-nav-item { transition: none; }
+  .tokis-speed-dial-action { transition: none; }
+  .tokis-speed-dial-actions { animation: none; }
+  .tokis-autocomplete-list  { animation: none; }
+  .tokis-fade { transition: none; }
+  .tokis-tree-item { transition: none; }
+  .tokis-transfer-item { transition: none; }
+  .tokis-number-field-btn { transition: none; }
+}

package/src/components/hover-card.css

@@ -0,0 +1,29 @@
+/* ── HoverCard ───────────────────────────────────────────── */
+
+.tokis-hover-card {
+  z-index: var(--tokis-z-popover);
+  background: var(--tokis-color-surface-overlay);
+  border: 1px solid var(--tokis-color-border);
+  border-radius: var(--tokis-radius-xl);
+  box-shadow: var(--tokis-shadow-xl);
+  padding: var(--tokis-spacing-4);
+  min-width: 220px;
+  max-width: 360px;
+  animation: tokis-hover-card-in var(--tokis-duration-fast) var(--tokis-ease-out);
+}
+
+@keyframes tokis-hover-card-in {
+  /* Use standalone 'translate' so it composes with the positioning
+     'transform' on the element instead of overriding it */
+  from { opacity: 0; translate: 0 4px; }
+  to   { opacity: 1; translate: 0 0; }
+}
+
+.tokis-hover-card--top { transform-origin: bottom center; }
+.tokis-hover-card--bottom { transform-origin: top center; }
+.tokis-hover-card--left  { transform-origin: right center; }
+.tokis-hover-card--right { transform-origin: left center; }
+
+@media (prefers-reduced-motion: reduce) {
+  .tokis-hover-card { animation: none; }
+}