/* Astryx component appearance classes.
   Recreated from the StyleX rules in facebook/astryx packages/core/src — exact token usage preserved.
   Namespace: .axs- */

/* ============================================================ Button */
.axs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-3);
  border: none;
  border-radius: var(--radius-element);
  font-family: inherit;
  font-size: var(--text-label-size);
  line-height: var(--text-label-leading);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition-property: background-image, background-color, color, opacity, transform;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
  transform: scale(1);
}
.axs-btn:active { transform: scale(0.98); }
.axs-btn--sm { height: var(--size-element-sm); }
.axs-btn--md { height: var(--size-element-md); }
.axs-btn--lg { height: var(--size-element-lg); }
.axs-btn--icon-only { aspect-ratio: 1 / 1; padding-inline: 0; padding-block: 0; }

.axs-btn--primary { background-color: var(--color-accent); color: var(--color-on-accent); }
.axs-btn--secondary { background-color: var(--color-neutral); color: var(--color-text-primary); }
.axs-btn--ghost { background-color: transparent; color: var(--color-text-primary); }
.axs-btn--destructive { background-color: var(--color-error); color: var(--color-on-error); }

@media (hover: hover) {
  .axs-btn:hover:not(:disabled) {
    background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
  }
}
.axs-btn:active:not(:disabled) {
  background-image: linear-gradient(var(--color-overlay-pressed), var(--color-overlay-pressed));
}
.axs-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.axs-btn--destructive:focus-visible { outline-color: var(--color-error); }
.axs-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-image: none;
  transform: none;
}
.axs-btn .axs-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px; height: 16px; font-size: 16px;
}
.axs-btn--lg .axs-btn-icon { width: 20px; height: 20px; font-size: 20px; }
.axs-btn-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Button group */
.axs-btn-group { display: inline-flex; }
.axs-btn-group > .axs-btn { border-radius: 0; }
.axs-btn-group > .axs-btn:not(:first-child) {
  border-inline-start: var(--border-width) solid var(--color-border);
}
.axs-btn-group > .axs-btn:first-child {
  border-start-start-radius: var(--radius-element);
  border-end-start-radius: var(--radius-element);
}
.axs-btn-group > .axs-btn:last-child {
  border-start-end-radius: var(--radius-element);
  border-end-end-radius: var(--radius-element);
}
.axs-btn-group > .axs-btn:active { transform: none; }
.axs-btn-group > .axs-btn--primary:not(:first-child),
.axs-btn-group > .axs-btn--destructive:not(:first-child) {
  border-inline-start-color: var(--color-on-accent);
}

/* ============================================================ Badge */
.axs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: var(--spacing-5);
  padding-block: 0;
  padding-inline: var(--spacing-2);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.axs-badge--neutral { background-color: var(--color-neutral); color: var(--color-text-primary); }
.axs-badge--info { background-color: var(--color-accent); color: var(--color-on-accent); }
.axs-badge--success { background-color: var(--color-success); color: var(--color-on-success); }
.axs-badge--warning { background-color: var(--color-warning); color: var(--color-on-warning); }
.axs-badge--error { background-color: var(--color-error); color: var(--color-on-error); }
.axs-badge--blue { background-color: var(--color-background-blue); color: var(--color-text-blue); }
.axs-badge--cyan { background-color: var(--color-background-cyan); color: var(--color-text-cyan); }
.axs-badge--green { background-color: var(--color-background-green); color: var(--color-text-green); }
.axs-badge--orange { background-color: var(--color-background-orange); color: var(--color-text-orange); }
.axs-badge--pink { background-color: var(--color-background-pink); color: var(--color-text-pink); }
.axs-badge--purple { background-color: var(--color-background-purple); color: var(--color-text-purple); }
.axs-badge--red { background-color: var(--color-background-red); color: var(--color-text-red); }
.axs-badge--teal { background-color: var(--color-background-teal); color: var(--color-text-teal); }
.axs-badge--yellow { background-color: var(--color-background-yellow); color: var(--color-text-yellow); }

/* ============================================================ Token (chip/tag) */
.axs-token {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding-block: 0;
  padding-inline: var(--spacing-2);
  border: none;
  border-radius: var(--radius-inner);
  font-family: inherit;
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
}
.axs-token--sm { height: calc(var(--size-element-sm) - 8px); padding-inline: var(--spacing-2); }
.axs-token--md { height: calc(var(--size-element-md) - 8px); padding-inline: var(--spacing-2); }
.axs-token--lg { height: calc(var(--size-element-lg) - 8px); padding-inline: var(--spacing-2); }
.axs-token--default { background-color: var(--color-neutral); color: var(--color-text-primary); }
.axs-token--red { background-color: var(--color-background-red); color: var(--color-text-red); }
.axs-token--orange { background-color: var(--color-background-orange); color: var(--color-text-orange); }
.axs-token--yellow { background-color: var(--color-background-yellow); color: var(--color-text-yellow); }
.axs-token--green { background-color: var(--color-background-green); color: var(--color-text-green); }
.axs-token--teal { background-color: var(--color-background-teal); color: var(--color-text-teal); }
.axs-token--cyan { background-color: var(--color-background-cyan); color: var(--color-text-cyan); }
.axs-token--blue { background-color: var(--color-background-blue); color: var(--color-text-blue); }
.axs-token--purple { background-color: var(--color-background-purple); color: var(--color-text-purple); }
.axs-token--pink { background-color: var(--color-background-pink); color: var(--color-text-pink); }
.axs-token--gray { background-color: var(--color-background-gray); color: var(--color-text-gray); }
.axs-token--interactive { cursor: pointer; transition: background-image var(--duration-fast) var(--ease-standard); }
@media (hover: hover) {
  .axs-token--interactive:hover {
    background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
  }
}
.axs-token--interactive:active {
  background-image: linear-gradient(var(--color-overlay-pressed), var(--color-overlay-pressed));
}
.axs-token-remove {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: calc(-1 * var(--spacing-1));
  cursor: pointer;
  border-radius: var(--radius-full);
  width: 16px; height: 16px;
  color: inherit;
}
.axs-token-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ============================================================ Card */
.axs-card {
  border-radius: var(--radius-container);
  overflow: clip;
  border: var(--border-width) solid transparent;
  padding: var(--spacing-4);
}
.axs-card--default { background-color: var(--color-background-card); border-color: var(--color-border-emphasized); }
.axs-card--transparent { background-color: transparent; }
.axs-card--muted { background-color: var(--color-background-muted); }
.axs-card--blue { background-color: var(--color-background-blue); }
.axs-card--cyan { background-color: var(--color-background-cyan); }
.axs-card--gray { background-color: var(--color-background-gray); }
.axs-card--green { background-color: var(--color-background-green); }
.axs-card--orange { background-color: var(--color-background-orange); }
.axs-card--pink { background-color: var(--color-background-pink); }
.axs-card--purple { background-color: var(--color-background-purple); }
.axs-card--red { background-color: var(--color-background-red); }
.axs-card--teal { background-color: var(--color-background-teal); }
.axs-card--yellow { background-color: var(--color-background-yellow); }

/* ============================================================ Kbd */
.axs-kbd-wrapper { display: inline-flex; align-items: center; gap: var(--spacing-1); flex-shrink: 0; }
.axs-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-5);
  height: var(--spacing-5);
  padding-inline: var(--spacing-1);
  border-radius: var(--radius-inner);
  background-color: var(--color-neutral);
  border-bottom: 2px solid var(--color-border-emphasized);
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--text-supporting-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-supporting-leading);
  user-select: none;
}

/* ============================================================ StatusDot */
.axs-statusdot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px; height: 8px;
}
.axs-statusdot--success { background-color: var(--color-success); }
.axs-statusdot--warning { background-color: var(--color-warning); }
.axs-statusdot--error { background-color: var(--color-error); }
.axs-statusdot--accent { background-color: var(--color-accent); }
.axs-statusdot--neutral { background-color: var(--color-icon-secondary); }
@keyframes axs-statusdot-pulse { 0% {opacity:1} 50% {opacity:.5} 100% {opacity:1} }
.axs-statusdot--pulsing { animation: axs-statusdot-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .axs-statusdot--pulsing { animation: none; } }

/* ============================================================ Divider */
.axs-divider { display: flex; align-items: center; width: 100%; }
.axs-divider--vertical { display: inline-flex; flex-direction: column; align-items: center; height: 100%; width: auto; }
.axs-divider-line { height: var(--border-width); flex: 1 1 auto; background-color: var(--color-border); }
.axs-divider--vertical .axs-divider-line { width: var(--border-width); height: auto; }
.axs-divider--strong .axs-divider-line { background-color: var(--color-border-emphasized); }
.axs-divider-label {
  flex-shrink: 0;
  padding-inline: var(--spacing-3);
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
  color: var(--color-text-secondary);
}

/* ============================================================ Avatar */
.axs-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.axs-avatar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  user-select: none;
}
.axs-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.axs-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background-color: var(--color-neutral);
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

/* ============================================================ EmptyState */
.axs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-4);
  padding-block: var(--spacing-8);
  padding-inline: var(--spacing-6);
}
.axs-empty-text { display: flex; flex-direction: column; align-items: center; max-width: 360px; }
.axs-empty-title {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-large-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-large-leading);
  color: var(--color-text-primary);
}
.axs-empty-description {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-text-secondary);
}
.axs-empty-actions { display: flex; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-1); }

/* ============================================================ Spinner */
@keyframes axs-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.axs-spinner { display: inline-grid; place-items: center; vertical-align: middle; }
.axs-spinner svg {
  display: block;
  animation: axs-spin var(--duration-slow-min) linear infinite;
}
@media (prefers-reduced-motion: reduce) { .axs-spinner svg { animation-duration: 3s; } }

/* ============================================================ ProgressBar */
.axs-progress { display: flex; flex-direction: column; gap: var(--spacing-1); width: 100%; min-width: 48px; }
.axs-progress-header { display: flex; justify-content: space-between; align-items: baseline; }
.axs-progress-label {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.axs-progress-value {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-text-secondary);
}
.axs-progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--color-background-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.axs-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-medium) var(--ease-standard);
}
.axs-progress-fill--accent { background-color: var(--color-accent); }
.axs-progress-fill--success { background-color: var(--color-success); }
.axs-progress-fill--warning { background-color: var(--color-warning); }
.axs-progress-fill--error { background-color: var(--color-error); }
.axs-progress-fill--neutral { background-color: var(--color-text-disabled); }
@keyframes axs-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.axs-progress-fill--indeterminate {
  width: 40%;
  animation: axs-progress-slide 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .axs-progress-fill--indeterminate { animation-duration: 3s; } }

/* ============================================================ Skeleton */
@keyframes axs-skeleton-fade { 0% { opacity: 0.25; } 100% { opacity: 1; } }
.axs-skeleton {
  background-color: var(--color-skeleton);
  opacity: 0.25;
  animation: axs-skeleton-fade var(--duration-medium-max) steps(10, end) infinite alternate;
  animation-delay: 1s;
}
@media (prefers-reduced-motion: reduce) { .axs-skeleton { animation: none; } }

/* ============================================================ Tooltip (static bubble) */
.axs-tooltip {
  display: inline-block;
  background-color: var(--color-background-inverted);
  color: var(--color-background-surface);
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
  padding-block: var(--spacing-1);
  padding-inline: var(--spacing-2);
  border-radius: var(--radius-element);
  box-shadow: var(--shadow-med);
  max-width: 240px;
}

/* ============================================================ Inputs (shared wrapper) */
.axs-input-wrapper {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-block: var(--spacing-1);
  padding-inline: var(--spacing-2);
  border: var(--border-width) solid var(--color-border-emphasized);
  border-radius: var(--radius-element);
  background-color: var(--color-background-surface);
  transition-property: border-color, box-shadow;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
}
.axs-input-wrapper--sm { height: var(--size-element-sm); }
.axs-input-wrapper--md { height: var(--size-element-md); }
.axs-input-wrapper--lg { height: var(--size-element-lg); }
.axs-input-wrapper--textarea { height: auto; }
@media (hover: hover) {
  .axs-input-wrapper:hover:not(:focus-within):not(.axs-input-wrapper--disabled) {
    box-shadow: inset 0px 0px 0px 2px color-mix(in srgb, var(--color-border-emphasized) 30%, transparent);
  }
}
.axs-input-wrapper:focus-within {
  border-color: var(--color-accent);
  box-shadow: inset 0px 0px 0px 2px var(--color-accent-muted);
}
.axs-input-wrapper--disabled { cursor: not-allowed; opacity: 0.5; }
.axs-input-wrapper--warning, .axs-input-wrapper--warning:focus-within { border-color: var(--color-warning); }
.axs-input-wrapper--error, .axs-input-wrapper--error:focus-within { border-color: var(--color-error); }
.axs-input-wrapper--success, .axs-input-wrapper--success:focus-within { border-color: var(--color-success); }
.axs-input {
  display: block;
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-text-primary);
  background-color: transparent;
  outline: none;
  resize: none;
}
.axs-input::placeholder { color: var(--color-text-secondary); }
.axs-input:disabled { cursor: not-allowed; }

/* Field label + status */
.axs-field { display: flex; flex-direction: column; gap: var(--spacing-1); }
.axs-field-label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-leading);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.axs-field-label--disabled { color: var(--color-text-disabled); }
.axs-field-description {
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
  color: var(--color-text-secondary);
}
.axs-field-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
}
.axs-field-status--error { color: var(--color-error); }
.axs-field-status--warning { color: var(--color-warning); }
.axs-field-status--success { color: var(--color-success); }

/* ============================================================ Checkbox */
.axs-checkbox-row { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; }
.axs-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: var(--border-width) solid var(--color-border-emphasized);
  border-radius: var(--radius-inner);
  background-color: var(--color-background-surface);
  color: var(--color-accent);
  transition-property: background-color, border-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
}
.axs-checkbox--sm { width: 18px; height: 18px; }
@media (hover: hover) {
  .axs-checkbox-row:hover .axs-checkbox:not(.axs-checkbox--checked):not(.axs-checkbox--disabled) {
    border-color: color-mix(in srgb, var(--color-border-emphasized), var(--color-tint-hover) 20%);
    background-color: color-mix(in srgb, var(--color-background-surface), var(--color-tint-hover) 5%);
  }
  .axs-checkbox-row:hover .axs-checkbox--checked:not(.axs-checkbox--disabled) {
    border-color: color-mix(in srgb, var(--color-accent), var(--color-tint-hover) 15%);
    background-color: color-mix(in srgb, var(--color-accent), var(--color-tint-hover) 15%);
  }
}
.axs-checkbox--checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}
.axs-checkbox--disabled { opacity: 0.5; border-color: var(--color-border); }
.axs-checkbox-row:has(input:focus-visible) .axs-checkbox {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================ Switch */
.axs-switch-row { display: flex; align-items: center; gap: var(--spacing-2); }
.axs-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 40px; height: 24px; }
.axs-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.axs-switch-track {
  display: flex;
  align-items: center;
  width: 40px; height: 24px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background-color: var(--color-background-gray);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.axs-switch--on .axs-switch-track { background-color: var(--color-accent); }
@media (hover: hover) {
  .axs-switch:hover:not(.axs-switch--disabled) .axs-switch-track {
    background-color: color-mix(in srgb, var(--color-background-gray), var(--color-tint-hover) 5%);
  }
  .axs-switch--on:hover:not(.axs-switch--disabled) .axs-switch-track {
    background-color: color-mix(in srgb, var(--color-accent), var(--color-tint-hover) 15%);
  }
}
.axs-switch-thumb {
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-background-surface);
  transform: translateX(0);
  transition-property: transform, width, height;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
}
.axs-switch--on .axs-switch-thumb { width: 20px; height: 20px; transform: translateX(14px); }
.axs-switch--disabled .axs-switch-track { opacity: 0.5; }
.axs-switch:has(input:focus-visible) .axs-switch-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================ SegmentedControl */
.axs-segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-0-5);
  padding: var(--spacing-0-5);
  background-color: var(--color-neutral);
  border-radius: var(--radius-element);
}
.axs-segmented--fill { display: flex; width: 100%; }
.axs-segmented-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: calc(var(--size-element-md) - 4px);
  padding-inline: var(--spacing-3);
  background-color: transparent;
  border: none;
  border-radius: max(0px, calc(var(--radius-element) - var(--spacing-0-5)));
  font-family: inherit;
  font-size: var(--text-label-size);
  line-height: var(--text-label-leading);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition-property: color, background-color, box-shadow;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
}
.axs-segmented--fill .axs-segmented-item { flex: 1; }
.axs-segmented-item--sm { height: calc(var(--size-element-sm) - 4px); padding-inline: var(--spacing-2); font-size: var(--text-supporting-size); }
.axs-segmented-item--lg { height: calc(var(--size-element-lg) - 4px); }
@media (hover: hover) {
  .axs-segmented-item:hover:not(.axs-segmented-item--selected) { background-color: var(--color-overlay-hover); }
}
.axs-segmented-item--selected {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-background-surface);
  box-shadow: var(--shadow-low);
}
.axs-segmented-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ============================================================ Tabs */
.axs-tablist { display: flex; align-items: stretch; gap: var(--spacing-0-5); max-width: 100%; min-width: 0; }
.axs-tablist--divider { border-bottom: var(--border-width) solid var(--color-border); }
.axs-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  height: var(--size-element-md);
  padding-inline: var(--spacing-3);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-element);
  font-family: inherit;
  font-size: var(--text-label-size);
  line-height: var(--text-label-leading);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}
.axs-tab--sm { height: var(--size-element-sm); }
.axs-tab--lg { height: var(--size-element-lg); }
@media (hover: hover) {
  .axs-tab:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-element);
    background-color: var(--color-overlay-hover);
    pointer-events: none;
  }
}
.axs-tab--selected { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.axs-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: var(--spacing-3);
  right: var(--spacing-3);
  height: 2px;
  border-radius: var(--radius-full);
  background-color: transparent;
  opacity: 0;
  transition-property: opacity, background-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
}
.axs-tab--selected .axs-tab-indicator { background-color: var(--color-accent); opacity: 1; }
.axs-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ============================================================ Typography */
.axs-text--body { font-size: var(--text-body-size); line-height: var(--text-body-leading); font-weight: var(--text-body-weight); }
.axs-text--large { font-size: var(--text-large-size); line-height: var(--text-large-leading); font-weight: var(--text-large-weight); }
.axs-text--label { font-size: var(--text-label-size); line-height: var(--text-label-leading); font-weight: var(--text-label-weight); }
.axs-text--supporting { font-size: var(--text-supporting-size); line-height: var(--text-supporting-leading); font-weight: var(--text-supporting-weight); }
.axs-text--code { font-family: var(--font-family-code); font-size: var(--text-code-size); line-height: var(--text-code-leading); }
.axs-text--display-1 { font-size: var(--text-display-1-size); line-height: var(--text-display-1-leading); font-weight: var(--text-display-1-weight); }
.axs-text--display-2 { font-size: var(--text-display-2-size); line-height: var(--text-display-2-leading); font-weight: var(--text-display-2-weight); }
.axs-text--display-3 { font-size: var(--text-display-3-size); line-height: var(--text-display-3-leading); font-weight: var(--text-display-3-weight); }
.axs-text--color-primary { color: var(--color-text-primary); }
.axs-text--color-secondary { color: var(--color-text-secondary); }
.axs-text--color-disabled { color: var(--color-text-disabled); }
.axs-text--color-accent { color: var(--color-text-accent); }
.axs-text--color-error { color: var(--color-error); }
.axs-text--color-success { color: var(--color-success); }
.axs-text--color-warning { color: var(--color-warning); }

.axs-heading { margin: 0; font-family: var(--font-family-heading); color: var(--color-text-primary); }
.axs-heading--1 { font-size: var(--text-heading-1-size); line-height: var(--text-heading-1-leading); font-weight: var(--text-heading-1-weight); }
.axs-heading--2 { font-size: var(--text-heading-2-size); line-height: var(--text-heading-2-leading); font-weight: var(--text-heading-2-weight); }
.axs-heading--3 { font-size: var(--text-heading-3-size); line-height: var(--text-heading-3-leading); font-weight: var(--text-heading-3-weight); }
.axs-heading--4 { font-size: var(--text-heading-4-size); line-height: var(--text-heading-4-leading); font-weight: var(--text-heading-4-weight); }
.axs-heading--5 { font-size: var(--text-heading-5-size); line-height: var(--text-heading-5-leading); font-weight: var(--text-heading-5-weight); }
.axs-heading--6 { font-size: var(--text-heading-6-size); line-height: var(--text-heading-6-leading); font-weight: var(--text-heading-6-weight); }

.axs-code {
  font-family: var(--font-family-code);
  font-size: var(--text-code-size);
  line-height: inherit;
  background-color: var(--color-background-muted);
  padding-inline: var(--spacing-1);
  border-radius: var(--radius-inner);
  overflow-wrap: break-word;
  word-break: break-word;
}

.axs-blockquote {
  margin: 0;
  border-inline-start: var(--spacing-0-5) solid var(--color-border-emphasized);
  padding-inline-start: var(--spacing-4);
  color: var(--color-text-secondary);
}
.axs-blockquote-cite {
  display: block;
  margin-block-start: var(--spacing-2);
  font-size: var(--text-supporting-size);
  line-height: var(--text-supporting-leading);
  font-style: normal;
}

/* ============================================================ Icon */
.axs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}