/* SilverTiger component recipes. Raw values belong in colors_and_type.css. */

.sr-only { position: absolute; width: var(--a11y-pixel); height: var(--a11y-pixel); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.st-button {
  min-height: var(--button-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding-inline: var(--button-padding-inline-md);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-md);
  font: var(--fw-semibold) var(--display-xs-size) / var(--display-xs-lh) var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
}

.st-button--primary { background: var(--btn-bg-primary); color: var(--btn-text-primary); }
.st-button--primary:hover { background: var(--bg-brand-solid-hover); }
.st-button--secondary { background: var(--btn-bg-secondary); color: var(--btn-text-secondary); border-color: var(--btn-border-brand); }
.st-button--secondary:hover { background: var(--btn-bg-secondary-hover); }
.st-button--destructive { background: var(--bg-error-solid); color: var(--text-white); }
.st-button:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.st-button--destructive:focus-visible { box-shadow: var(--ring-focus-error); }
.st-button:disabled,
.st-button[aria-disabled="true"] { background: var(--bg-disabled); color: var(--text-disabled); border-color: var(--border-disabled); cursor: not-allowed; }
.st-button--loading { cursor: wait; }
.st-button__spinner { width: var(--control-icon-size-sm); height: var(--control-icon-size-sm); border: var(--border-width-default) solid currentColor; border-right-color: var(--transparent); border-radius: var(--radius-full); animation: st-spin var(--duration-loading) linear infinite; }

.st-field { display: grid; gap: var(--spacing-sm); color: var(--text-secondary); }
.st-field__label { font: var(--fw-medium) var(--label-md-size) / var(--label-md-lh) var(--font-body); }
.st-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--input-height-md);
  padding-inline: var(--control-padding-inline-md);
  border: var(--border-width-default) solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: var(--fw-regular) var(--input-font-size-md) / var(--input-line-height) var(--font-body);
  box-shadow: var(--shadow-xs);
}
.st-input--xs { height: var(--input-height-xs); padding-inline: var(--input-padding-inline-xs); font-size: var(--input-font-size-xs); }
.st-input--sm { height: var(--input-height-sm); padding-inline: var(--input-padding-leading-sm) var(--input-padding-trailing-sm); font-size: var(--input-font-size-sm); }
.st-input--md { height: var(--input-height-md); padding-inline: var(--input-padding-inline-md); font-size: var(--input-font-size-md); }
.st-input--lg { height: var(--input-height-lg); padding-inline: var(--input-padding-leading-lg) var(--input-padding-trailing-lg); font-size: var(--input-font-size-lg); }
.st-input::placeholder { color: var(--text-placeholder); }
.st-input:hover { border-color: var(--border-brand-primary); }
.st-input:focus-visible { outline: none; box-shadow: var(--ring-focus); border-color: var(--border-brand-primary); }
.st-input:disabled { background: var(--bg-disabled); color: var(--text-disabled); cursor: not-allowed; }
.st-input[aria-invalid="true"] { border-color: var(--border-error); }
.st-input[aria-invalid="true"]:focus-visible { box-shadow: var(--ring-focus-error); }
.st-field__message { color: var(--text-tertiary); font: var(--fw-regular) var(--text-sm-size) / var(--text-sm-lh) var(--font-body); }
.st-field__message--error { color: var(--text-error-primary); }

.st-choice {
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  gap: var(--choice-gap);
  position: relative;
  color: var(--text-primary);
  cursor: pointer;
  font: var(--fw-regular) var(--fs-body-sm) / var(--lh-tight) var(--font-body);
}
.st-choice__input,
.st-switch__input {
  position: absolute;
  width: var(--a11y-pixel);
  height: var(--a11y-pixel);
  opacity: 0;
  clip-path: inset(50%);
}
.st-choice__control {
  width: var(--choice-size-md);
  height: var(--choice-size-md);
  flex: none;
  position: relative;
  border: var(--border-width-default) solid var(--main-border-input);
  border-radius: var(--radius-xs);
  background: var(--bg-primary);
  transition: border-color var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}
.st-choice--lg .st-choice__control { width: var(--choice-size-lg); height: var(--choice-size-lg); }
.st-choice--radio .st-choice__control { border-radius: var(--radius-full); }
.st-choice:hover .st-choice__control { border-color: var(--main-primary); }
.st-choice__input:focus-visible + .st-choice__control { box-shadow: var(--ring-focus); border-color: var(--main-primary); }
.st-choice__input:checked + .st-choice__control { border-color: var(--main-primary); background: var(--main-primary); }
.st-choice--checkbox .st-choice__input:checked + .st-choice__control::after {
  content: "";
  position: absolute;
  inset: 8% auto auto 30%;
  width: 30%;
  height: 55%;
  border: solid var(--main-white);
  border-width: 0 var(--choice-mark-stroke) var(--choice-mark-stroke) 0;
  transform: rotate(45deg);
}
.st-choice--checkbox .st-choice__input:indeterminate + .st-choice__control { border-color: var(--main-primary); background: var(--bg-primary); }
.st-choice--checkbox .st-choice__input:indeterminate + .st-choice__control::after {
  content: "";
  position: absolute;
  inset: 50% 20% auto;
  height: var(--choice-mark-stroke);
  background: var(--main-primary);
  transform: translateY(-50%);
}
.st-choice--radio .st-choice__input:checked + .st-choice__control { background: var(--bg-primary); }
.st-choice--radio .st-choice__input:checked + .st-choice__control::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: var(--radius-full);
  background: var(--main-primary);
}
.st-choice__input:disabled + .st-choice__control { border-color: var(--main-border-input); background: var(--choice-disabled-bg); }
.st-choice--checkbox .st-choice__input:disabled:checked + .st-choice__control::after { border-color: var(--main-border-input); }
.st-choice--radio .st-choice__input:disabled:checked + .st-choice__control::after { background: var(--main-border-input); }
.st-choice:has(.st-choice__input:disabled) { color: var(--text-disabled); cursor: not-allowed; }

.st-switch {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.st-switch__track {
  --switch-width: var(--toggle-track-w-md);
  --switch-height: var(--toggle-track-h-md);
  --switch-knob: var(--toggle-knob-md);
  width: var(--switch-width);
  height: var(--switch-height);
  position: relative;
  border-radius: var(--radius-full);
  background: var(--toggle-off);
  transition: background-color var(--duration-normal) var(--ease-standard);
}
.st-switch--lg .st-switch__track { --switch-width: var(--toggle-track-w-lg); --switch-height: var(--toggle-track-h-lg); --switch-knob: var(--toggle-knob-lg); }
.st-switch__track::after {
  content: "";
  position: absolute;
  inset: var(--toggle-inset) auto auto var(--toggle-inset);
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: var(--radius-full);
  background: var(--main-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-standard);
}
.st-switch__input:checked + .st-switch__track { background: var(--main-primary); }
.st-switch__input:checked + .st-switch__track::after { transform: translateX(calc(var(--switch-width) - var(--switch-knob) - (var(--toggle-inset) * 2))); }
.st-switch__input:disabled:checked + .st-switch__track { background: var(--toggle-on-disabled); }
.st-switch__input:disabled:not(:checked) + .st-switch__track { background: var(--toggle-off-disabled); }
.st-switch__input:focus-visible + .st-switch__track { box-shadow: var(--ring-focus); }
.st-switch:has(.st-switch__input:disabled) { cursor: not-allowed; }

.st-label {
  height: var(--label-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding-inline: var(--label-padding-sm);
  border-radius: var(--radius-full);
  font: var(--fw-medium) var(--label-font-sm) / var(--lh-tight) var(--font-body);
  white-space: nowrap;
}
.st-label--xs { height: var(--label-height-xs); padding-inline: var(--label-padding-xs); font-size: var(--label-font-xs); }
.st-label--md { height: var(--label-height-md); padding-inline: var(--label-padding-md); font-size: var(--label-font-md); }
.st-label--lg { height: var(--label-height-lg); padding-inline: var(--label-padding-lg); font-size: var(--label-font-lg); font-weight: var(--fw-semibold); }
.st-label--active { background: var(--status-success-bg); color: var(--main-success); }
.st-label--new { background: var(--status-info-bg); color: var(--main-primary); }
.st-label--verifying { background: var(--status-warning-bg); color: var(--main-warning); }
.st-label--locked { background: var(--status-error-bg); color: var(--main-danger); }
.st-label--inactive { background: var(--status-inactive-bg); color: var(--status-inactive-text); }

.st-alert {
  width: 100%;
  max-width: var(--alert-max-width);
  display: flex;
  align-items: flex-start;
  gap: var(--alert-gap-md);
  padding: var(--alert-padding-block-md) var(--alert-padding-inline-md);
  border: var(--border-width-default) solid;
  border-radius: var(--radius-md);
  font: var(--fw-medium) var(--fs-body-sm) / var(--lh-tight) var(--font-body);
}
.st-alert--sm { align-items: center; gap: var(--alert-gap-sm); padding: var(--alert-padding-sm); font-size: var(--fs-body-xs); }
.st-alert--success { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--main-success); }
.st-alert--info { border-color: var(--status-info-border); background: var(--status-info-bg); color: var(--status-info-text-strong); }
.st-alert--warning { border-color: var(--status-warning-border); background: var(--status-warning-bg); color: var(--status-warning-text); }
.st-alert--error { border-color: var(--status-error-border); background: var(--status-error-bg); color: var(--main-danger); }
.st-alert__icon { width: var(--alert-icon-size); height: var(--alert-icon-size); display: grid; place-items: center; flex: none; }
.st-alert__icon img { width: var(--alert-glyph-size); height: var(--alert-glyph-size); display: block; }
.st-alert__content { min-width: 0; flex: 1; }
.st-alert__close { width: var(--alert-icon-size); height: var(--alert-icon-size); display: grid; place-items: center; flex: none; position: relative; padding: var(--spacing-none); border: none; background: transparent; color: currentColor; cursor: pointer; }
.st-alert__close::before { content: ""; position: absolute; inset: calc((var(--touch-target-min) - var(--alert-icon-size)) / -2); }
.st-alert__close img { width: var(--alert-glyph-size); height: var(--alert-glyph-size); display: block; }
.st-alert__close:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.st-tabs { display: flex; align-items: end; gap: var(--spacing-3xl); overflow-x: auto; }
.st-tab {
  height: var(--tab-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tab-gap);
  flex: none;
  padding: var(--tab-padding-block) var(--tab-padding-inline);
  border: none;
  border-bottom: var(--border-width-default) solid var(--bg-primary); /* trắng (#ffffff) ở giao diện sáng, theo nền ở dark mode */
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: var(--fw-medium) var(--tab-font-sm) / var(--lh-tight) var(--font-body);
}
.st-tab--xs { height: var(--tab-height-xs); font-size: var(--tab-font-xs); }
.st-tab--md { height: var(--tab-height-md); font-size: var(--tab-font-md); }
.st-tab:hover { color: var(--main-primary); }
.st-tab[aria-selected="true"] { border-bottom-width: var(--tab-indicator-size); border-bottom-color: var(--main-primary); color: var(--main-primary); }
.st-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.st-tab__badge { padding-inline: var(--tab-badge-padding-inline); border-radius: var(--radius-full); background: var(--status-info-bg); color: var(--main-primary); font-size: var(--tab-font-xs); }
.st-tab:not([aria-selected="true"]) .st-tab__badge { background: var(--status-inactive-bg); color: var(--text-secondary); }

.st-loader {
  width: var(--spinner-size-md);
  height: var(--spinner-size-md);
  display: inline-block;
  border: var(--spinner-stroke-lg) solid var(--status-info-bg);
  border-top-color: var(--main-primary);
  border-radius: var(--radius-full);
  animation: st-spin var(--duration-loading) linear infinite;
}
.st-loader--xxs { width: var(--spinner-size-xxs); height: var(--spinner-size-xxs); border-width: var(--spinner-stroke-xxs); }
.st-loader--xs { width: var(--spinner-size-xs); height: var(--spinner-size-xs); border-width: var(--spinner-stroke-xxs); }
.st-loader--sm { width: var(--spinner-size-sm); height: var(--spinner-size-sm); border-width: var(--spinner-stroke-sm); }
.st-loader--lg { width: var(--spinner-size-lg); height: var(--spinner-size-lg); }
.st-loader--xl { width: var(--spinner-size-xl); height: var(--spinner-size-xl); }

.st-tooltip {
  width: var(--tooltip-width);
  min-height: var(--tooltip-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tooltip-padding-block-default) var(--tooltip-padding-inline-default);
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  box-shadow: var(--tooltip-shadow);
  font: var(--fw-regular) var(--fs-body-xs) / var(--lh-tight) var(--font-body);
  text-align: center;
}
.st-tooltip--xs,
.st-tooltip--sm { padding: var(--tooltip-padding-block-compact) var(--tooltip-padding-inline-compact); }
.st-tooltip--xs { min-height: var(--tooltip-height-xs); font-size: var(--fs-body-xs); }
.st-tooltip--sm { min-height: var(--tooltip-height-sm); font-size: var(--fs-body-sm); }

.st-avatar {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: none;
  overflow: visible;
  border-radius: var(--radius-full);
  background: var(--bg-brand-solid);
  color: var(--text-primary-on-brand);
  font: var(--fw-semibold) var(--fs-body-sm) / var(--lh-tight) var(--font-body);
}
.st-avatar--sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); font-size: var(--fs-body-xs); }
.st-avatar--lg { width: var(--avatar-size-lg); height: var(--avatar-size-lg); font-size: var(--fs-body-lg); }
.st-avatar--xl { width: var(--avatar-size-xl); height: var(--avatar-size-xl); font-size: var(--display-md-size); }
.st-avatar__image { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.st-avatar__status { width: var(--avatar-status-md); height: var(--avatar-status-md); position: absolute; right: 0; bottom: 0; border: var(--avatar-status-border) solid var(--bg-primary); border-radius: var(--radius-full); background: var(--main-success); }
.st-avatar--sm .st-avatar__status { width: var(--avatar-status-sm); height: var(--avatar-status-sm); }
.st-avatar--lg .st-avatar__status { width: var(--avatar-status-lg); height: var(--avatar-status-lg); }
.st-avatar--xl .st-avatar__status { width: var(--avatar-status-xl); height: var(--avatar-status-xl); }
.st-avatar-group { display: flex; align-items: center; }
.st-avatar-group .st-avatar + .st-avatar { margin-inline-start: calc(var(--spacing-md) * -1); }

.st-breadcrumb { color: var(--main-text-grey); font: var(--fw-regular) var(--fs-body-sm) / var(--lh-tight) var(--font-body); }
.st-breadcrumb__list { display: flex; align-items: center; gap: var(--breadcrumb-gap); margin: 0; padding: 0; list-style: none; }
.st-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--breadcrumb-gap); min-width: 0; }
.st-breadcrumb__link,
.st-breadcrumb__current { min-height: var(--breadcrumb-height); display: inline-flex; align-items: center; gap: var(--breadcrumb-item-gap); padding-inline: var(--breadcrumb-padding-inline); border-radius: var(--radius-sm); color: inherit; text-decoration: none; white-space: nowrap; }
.st-breadcrumb__link:hover { background: var(--status-inactive-bg); color: var(--main-primary); }
.st-breadcrumb__link:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.st-breadcrumb__separator { width: var(--breadcrumb-icon-size); height: var(--breadcrumb-icon-size); display: inline-grid; place-items: center; color: var(--text-disabled); }
.st-breadcrumb__separator::before { content: ""; width: 35%; height: 35%; border-block-start: var(--border-width-default) solid currentColor; border-inline-end: var(--border-width-default) solid currentColor; transform: rotate(45deg); }

.st-pagination { max-width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--pagination-section-gap); color: var(--main-text-grey); font: var(--fw-regular) var(--fs-body-xs) / var(--lh-tight) var(--font-body); }
.st-pagination__summary,
.st-pagination__pages { display: flex; align-items: center; gap: var(--pagination-control-gap); }
.st-pagination__pages { gap: var(--pagination-gap); }
.st-pagination__select { height: var(--pagination-item-size); padding-inline: var(--spacing-md); border: var(--border-width-default) solid var(--main-line-color); border-radius: var(--pagination-select-radius); background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.st-pagination__button,
.st-pagination__page { min-width: var(--pagination-item-size); height: var(--pagination-item-size); display: inline-grid; place-items: center; padding: 0; border: var(--border-width-default) solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--main-text-grey); font: var(--fw-regular) var(--fs-body-sm) / var(--lh-tight) var(--font-body); cursor: pointer; }
.st-pagination__page:hover,
.st-pagination__button:hover { background: var(--status-inactive-bg); color: var(--main-primary); }
.st-pagination__page[aria-current="page"] { border-color: var(--main-primary); color: var(--main-primary); }
.st-pagination__button:focus-visible,
.st-pagination__page:focus-visible,
.st-pagination__select:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.st-pagination__button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.st-pagination__ellipsis { min-width: var(--pagination-item-size); text-align: center; font-size: var(--pagination-ellipsis-font-size); }

.st-badge { min-width: var(--badge-height-md); height: var(--badge-height-md); display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--badge-padding-md); border-radius: var(--radius-full); background: var(--main-danger); color: var(--main-white); font: var(--fw-semibold) var(--badge-font-md) / var(--lh-tight) var(--font-body); white-space: nowrap; }
.st-badge--sm { padding-inline: var(--badge-padding-sm); }
.st-badge--xs { min-width: var(--badge-height-xs); height: var(--badge-height-xs); padding-inline: var(--badge-padding-sm); font-size: var(--badge-font-xs); }
.st-badge--gray { background: var(--status-inactive-text); }
.st-badge--green { background: var(--main-success); }
.st-badge--blue { background: var(--main-primary); }
.st-badge--warning { background: var(--badge-warning); color: var(--main-text-body); }
.st-badge--invert { background: var(--status-error-bg); color: var(--main-danger); }
.st-badge--green.st-badge--invert { background: var(--status-success-bg); color: var(--main-success); }
.st-badge--blue.st-badge--invert { background: var(--status-info-bg); color: var(--main-primary); }

.st-stepper { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.st-step { display: flex; align-items: center; color: var(--text-secondary); font: var(--fw-medium) var(--fs-body-sm) / var(--lh-tight) var(--font-body); }
.st-step:not(:last-child)::after { content: ""; width: var(--stepper-connector-width); height: var(--border-width-default); margin-inline: var(--stepper-gap); background: var(--main-line-color); }
.st-step__content { display: inline-flex; align-items: center; gap: var(--stepper-gap); }
.st-step__marker { width: var(--step-marker-size); height: var(--step-marker-size); display: inline-grid; place-items: center; flex: none; border: var(--border-width-default) solid var(--main-line-color); border-radius: var(--radius-full); background: var(--bg-primary); color: var(--main-text-grey); font: var(--fw-semibold) var(--fs-body-sm) / var(--lh-tight) var(--font-body); }
.st-step[aria-current="step"] .st-step__marker,
.st-step--done .st-step__marker { border-color: var(--main-success); background: var(--main-success); color: var(--main-white); }
.st-step[aria-current="step"] .st-step__label { color: var(--main-success); }
.st-step--done .st-step__marker::before { content: ""; width: 30%; height: 52%; border: solid currentColor; border-width: 0 var(--choice-mark-stroke) var(--choice-mark-stroke) 0; transform: rotate(45deg); }
.st-step--done .st-step__marker { font-size: 0; }
.st-step--disabled { color: var(--text-disabled); }

.st-brand-logo { display: block; width: auto; height: var(--spacing-4xl); }
.st-app-icon { display: inline-block; width: var(--app-icon-size-md); height: var(--app-icon-size-md); object-fit: contain; }
.st-app-icon--sm { width: var(--app-icon-size-sm); height: var(--app-icon-size-sm); }
.st-app-icon--lg { width: var(--app-icon-size-lg); height: var(--app-icon-size-lg); }
.st-app-icon--xl { width: var(--app-icon-size-xl); height: var(--app-icon-size-xl); }

@keyframes st-spin { to { transform: rotate(var(--rotation-full)); } }

@media (prefers-reduced-motion: reduce) {
  .st-button { transition: none; }
  .st-button__spinner,
  .st-loader { animation-duration: var(--duration-loading-reduced); }
}