/*
 * FPF Design System 2.1 — componentes base
 * Framework-agnostic component styles. Load after tokens.css, base.css
 * and typography.css. Pair with js/components.js for interactive
 * behaviour (tabs, accordion, checkbox/radio/toggle, pagination, etc.)
 * and js/icons.js for the icon set.
 */

/* ── Surface / card wrapper used throughout the showcase ────────── */

.fpf-panel {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--colour-transparency-black-15);
  background: var(--colour-neutral-100);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Botão padrão ─────────────────────────────────────────────── */
/* 40px height · radius 8 · padding 8/12 · label Barlow Condensed SemiBold 20/28 */

.fpf-btn {
  height: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--fpf-font-labels);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  white-space: nowrap;
  background: transparent;
  color: var(--colour-neutral-20);
}

.fpf-btn__icon { flex-shrink: 0; }

.fpf-btn--primary {
  background: var(--colour-brand-40);
  color: var(--colour-neutral-20);
}
.fpf-btn--primary:hover { box-shadow: inset 0 0 0 999px var(--colour-transparency-black-10); }
.fpf-btn--primary:active { box-shadow: inset 0 0 0 999px var(--colour-transparency-black-20); }

.fpf-btn--secondary {
  background: var(--colour-neutral-20);
  color: var(--colour-neutral-120);
}
.fpf-btn--secondary:hover { box-shadow: inset 0 0 0 999px var(--colour-transparency-white-10); }
.fpf-btn--secondary:active { box-shadow: inset 0 0 0 999px var(--colour-transparency-white-20); }

.fpf-btn--outlined {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
  color: var(--colour-neutral-20);
}
.fpf-btn--outlined:hover { background: var(--colour-transparency-black-10); }
.fpf-btn--outlined:active { background: var(--colour-transparency-black-20); }

.fpf-btn--ghost {
  background: transparent;
  color: var(--colour-neutral-20);
}
.fpf-btn--ghost:hover { background: var(--colour-transparency-black-10); }
.fpf-btn--ghost:active { background: var(--colour-transparency-black-20); }

.fpf-btn--destructive {
  background: var(--colour-accents-red-40);
  color: var(--colour-neutral-120);
}
.fpf-btn--destructive:hover { box-shadow: inset 0 0 0 999px var(--colour-transparency-black-30); }
.fpf-btn--destructive:active { box-shadow: inset 0 0 0 999px var(--colour-transparency-black-40); }

.fpf-btn:disabled,
.fpf-btn[aria-disabled="true"] {
  background: var(--colour-transparency-black-5);
  color: var(--colour-transparency-black-30);
  box-shadow: none;
  cursor: not-allowed;
}

.fpf-btn-skeleton {
  height: 40px;
  width: 108px;
  border-radius: 8px;
  background: var(--colour-transparency-black-5);
  animation: fpf-pulse 1.6s ease-in-out infinite;
}

/* icon-only button, 40×40 */
.fpf-btn-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--colour-neutral-20);
}
.fpf-btn-icon:hover { background: var(--colour-transparency-black-10); }
.fpf-btn-icon--outlined { box-shadow: inset 0 0 0 1px var(--colour-neutral-20); }
.fpf-btn-icon--primary {
  background: var(--colour-brand-40);
}
.fpf-btn-icon--primary:hover { box-shadow: inset 0 0 0 999px var(--colour-transparency-black-10); background: var(--colour-brand-40); }
.fpf-btn-icon--destructive {
  background: var(--colour-accents-red-40);
  color: var(--colour-neutral-120);
}
.fpf-btn-icon--destructive:hover { box-shadow: inset 0 0 0 999px var(--colour-transparency-black-30); background: var(--colour-accents-red-40); }

/* combo / split button */
.fpf-btn-combo {
  display: flex;
  align-items: stretch;
  height: 40px;
}
.fpf-btn-combo__main {
  border: 0;
  border-radius: 8px 0 0 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--fpf-font-labels);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--colour-neutral-20);
}
.fpf-btn-combo__main:hover { background: var(--colour-transparency-black-10); }
.fpf-btn-combo__toggle {
  width: 40px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--colour-neutral-20);
}
.fpf-btn-combo__toggle:hover { background: var(--colour-transparency-black-10); }
.fpf-btn-combo__toggle svg {
  transition: transform .18s ease;
}
.fpf-btn-combo__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ── Badge & Tags ─────────────────────────────────────────────── */
/* radius 500 · texto 12/16 (badge) · Inter 14/20 (tag) */

.fpf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 500px;
  font-family: var(--fpf-font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  background: var(--colour-neutral-20);
  color: var(--colour-neutral-120);
}
.fpf-badge--primary { background: var(--colour-neutral-20); color: var(--colour-neutral-120); }
.fpf-badge--success { background: var(--colour-accents-green-50); color: var(--colour-neutral-120); }
.fpf-badge--info { background: var(--colour-accents-blue-30); color: var(--colour-neutral-120); }
.fpf-badge--alert { background: var(--colour-accents-yellow-30); color: var(--colour-neutral-20); }
.fpf-badge--error { background: var(--colour-accents-red-40); color: var(--colour-neutral-120); }
.fpf-badge--outlined { background: transparent; color: var(--colour-neutral-20); box-shadow: inset 0 0 0 1px var(--colour-neutral-20); }
.fpf-badge--disabled { background: var(--colour-transparency-black-5); color: var(--colour-transparency-black-30); }

.fpf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 500px;
  background: var(--colour-neutral-120);
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-neutral-20);
  cursor: pointer;
}
.fpf-tag:hover { background: var(--colour-neutral-90); }
.fpf-tag__remove { color: var(--colour-transparency-black-50); display: inline-flex; }

/* ── Input / Field ────────────────────────────────────────────── */
/* 40px · radius 8 · Inter 14/20 · label 12/16 acima · helper 12/16 abaixo */

.fpf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fpf-field__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.fpf-field__label {
  font-family: var(--fpf-font-text);
  font-size: 12px;
  line-height: 16px;
  color: var(--colour-neutral-20);
}

.fpf-field__counter {
  font-family: var(--fpf-font-text);
  font-size: 12px;
  line-height: 16px;
  color: var(--colour-transparency-black-50);
}

.fpf-field__control {
  height: 40px;
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-transparency-black-15);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fpf-field__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-neutral-20);
}
.fpf-field__input::placeholder { color: var(--colour-transparency-black-50); }

.fpf-field__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--colour-neutral-20);
}

.fpf-field__helper {
  font-family: var(--fpf-font-text);
  font-size: 12px;
  line-height: 16px;
  color: var(--colour-transparency-black-50);
}

.fpf-field--focus .fpf-field__control,
.fpf-field__control:focus-within {
  box-shadow: inset 0 0 0 2px var(--colour-accents-blue-30);
}

.fpf-field--filled .fpf-field__control {
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
}

.fpf-field--success .fpf-field__control { box-shadow: inset 0 0 0 1px var(--colour-accents-green-50); }
.fpf-field--success .fpf-field__icon { color: var(--colour-accents-green-50); }
.fpf-field--success .fpf-field__helper { color: var(--colour-accents-green-50); }

.fpf-field--error .fpf-field__control { box-shadow: inset 0 0 0 1px var(--colour-accents-red-40); }
.fpf-field--error .fpf-field__icon { color: var(--colour-accents-red-40); }
.fpf-field--error .fpf-field__helper { color: var(--colour-accents-red-40); }

.fpf-field--disabled .fpf-field__control,
.fpf-field__control:has(.fpf-field__input:disabled) {
  background: var(--colour-transparency-black-5);
  box-shadow: inset 0 0 0 1px var(--colour-transparency-black-20);
}
.fpf-field--disabled .fpf-field__input,
.fpf-field__input:disabled { color: var(--colour-transparency-black-30); }
.fpf-field--disabled .fpf-field__icon { color: var(--colour-transparency-black-30); }
.fpf-field--disabled .fpf-field__helper { color: var(--colour-transparency-black-30); }

/* ── Checkbox · Radio · Toggle · Switch ───────────────────────── */
/* controlos 20px · toggle 36×24 */

.fpf-checkbox,
.fpf-radio,
.fpf-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--fpf-font-heading);
  font-size: 16px;
  line-height: 20px;
  color: var(--colour-neutral-20);
}

.fpf-checkbox input,
.fpf-radio input,
.fpf-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  padding: 0;
}

.fpf-checkbox__box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
  color: var(--colour-neutral-120);
}
.fpf-checkbox input:checked + .fpf-checkbox__box,
.fpf-checkbox input:indeterminate + .fpf-checkbox__box,
.fpf-checkbox__box.is-checked,
.fpf-checkbox__box.is-indeterminate {
  background: var(--colour-neutral-20);
  box-shadow: none;
}
.fpf-checkbox--disabled { cursor: not-allowed; }
.fpf-checkbox--disabled .fpf-checkbox__box { background: var(--colour-transparency-black-5); box-shadow: inset 0 0 0 1px var(--colour-transparency-black-20); }
.fpf-checkbox--disabled span:last-child { color: var(--colour-transparency-black-30); }
.fpf-checkbox--error .fpf-checkbox__box { background: transparent; box-shadow: inset 0 0 0 1px var(--colour-accents-red-40); }
.fpf-checkbox--error span:last-child { color: var(--colour-accents-red-40); }

.fpf-radio__box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
}
.fpf-radio__box::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--colour-neutral-120);
  opacity: 0;
}
.fpf-radio input:checked + .fpf-radio__box,
.fpf-radio__box.is-checked {
  background: var(--colour-neutral-20);
  box-shadow: none;
}
.fpf-radio input:checked + .fpf-radio__box::after,
.fpf-radio__box.is-checked::after {
  opacity: 1;
}
.fpf-radio--disabled { cursor: not-allowed; }
.fpf-radio--disabled .fpf-radio__box { background: var(--colour-transparency-black-5); box-shadow: inset 0 0 0 1px var(--colour-transparency-black-20); }
.fpf-radio--disabled span:last-child { color: var(--colour-transparency-black-30); }

.fpf-toggle__track {
  width: 36px;
  height: 24px;
  flex: 0 0 36px;
  border-radius: 500px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--colour-neutral-20);
  transition: background .18s ease;
}
.fpf-toggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--colour-neutral-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: transform .18s ease;
}
.fpf-toggle input:checked ~ .fpf-toggle__track,
.fpf-toggle__track.is-on {
  background: var(--colour-neutral-20);
  box-shadow: none;
  justify-content: flex-end;
}
.fpf-toggle input:checked ~ .fpf-toggle__track .fpf-toggle__knob,
.fpf-toggle__track.is-on .fpf-toggle__knob {
  background: var(--colour-neutral-120);
  color: var(--colour-neutral-20);
}
.fpf-toggle--disabled { cursor: not-allowed; }
.fpf-toggle--disabled .fpf-toggle__track { background: var(--colour-transparency-black-5); box-shadow: inset 0 0 0 1px var(--colour-transparency-black-20); }
.fpf-toggle--disabled .fpf-toggle__knob { background: var(--colour-transparency-black-20); }
.fpf-toggle--disabled span:last-child { color: var(--colour-transparency-black-30); }

.fpf-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 500px;
  background: var(--colour-neutral-90);
  align-self: flex-start;
}
.fpf-switch__opt {
  height: 24px;
  border: 0;
  padding: 0 12px;
  border-radius: 500px;
  cursor: pointer;
  background: transparent;
  font-family: var(--fpf-font-heading);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-transparency-black-70, rgba(0,0,55,0.7));
}
.fpf-switch__opt[aria-selected="true"] {
  background: var(--colour-neutral-20);
  color: var(--colour-neutral-120);
}

/* ── Tab list · Breadcrumbs · Paginação ───────────────────────── */
/* Inter 14/20 */

.fpf-tabs--line {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--colour-transparency-black-15);
}
.fpf-tabs--line .fpf-tabs__tab {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-transparency-black-50);
  box-shadow: none;
}
.fpf-tabs--line .fpf-tabs__tab:hover { background: var(--colour-transparency-black-5); }
.fpf-tabs--line .fpf-tabs__tab[aria-selected="true"] {
  color: var(--colour-neutral-20);
  box-shadow: inset 0 -2px 0 0 var(--colour-neutral-20);
}

.fpf-tabs--box {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fpf-tabs--box .fpf-tabs__tab {
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  background: transparent;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-transparency-black-70, rgba(0,0,55,0.7));
}
.fpf-tabs--box .fpf-tabs__tab[aria-selected="true"] {
  background: var(--colour-neutral-20);
  color: var(--colour-neutral-120);
}

.fpf-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.fpf-breadcrumbs a {
  padding: 4px;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-neutral-20);
  text-decoration: underline;
}
.fpf-breadcrumbs__current {
  padding: 4px;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-transparency-black-50);
}
.fpf-breadcrumbs__sep {
  color: var(--colour-transparency-black-50);
  display: inline-flex;
}

.fpf-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fpf-pagination__nav {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--colour-neutral-20);
}
.fpf-pagination__nav:hover { background: var(--colour-transparency-black-10); }
.fpf-pagination__nav:disabled { color: var(--colour-transparency-black-30); cursor: not-allowed; background: transparent; }
.fpf-pagination__page {
  min-width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0 8px;
  cursor: pointer;
  background: transparent;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-transparency-black-70, rgba(0,0,55,0.7));
}
.fpf-pagination__page[aria-current="true"] {
  background: var(--colour-neutral-20);
  color: var(--colour-neutral-120);
}

/* ── Accordion · Link · Divider ───────────────────────────────── */
/* header 40px min · padding 16 */

.fpf-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fpf-accordion__item {
  border-radius: 8px;
  background: var(--colour-neutral-120);
  box-shadow: inset 0 0 0 1px var(--colour-transparency-black-15);
  overflow: hidden;
}
.fpf-accordion__header {
  width: 100%;
  border: 0;
  background: transparent;
  min-height: 40px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.fpf-accordion__header:hover { background: var(--colour-transparency-black-5); }
.fpf-accordion__title {
  flex: 1 1 auto;
  font-family: var(--fpf-font-labels);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--colour-neutral-20);
}
.fpf-accordion__chevron {
  flex: 0 0 24px;
  color: var(--colour-neutral-20);
  transition: transform .18s ease;
}
.fpf-accordion__header[aria-expanded="true"] .fpf-accordion__chevron {
  transform: rotate(180deg);
}
.fpf-accordion__panel {
  padding: 0 16px 16px 16px;
}
.fpf-accordion__panel[hidden] { display: none; }
.fpf-accordion__panel p {
  margin: 0;
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-transparency-black-70, rgba(0,0,55,0.7));
}

.fpf-divider {
  height: 1px;
  background: var(--colour-transparency-black-15);
  border: 0;
}
.fpf-divider--text {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  background: none;
}
.fpf-divider--text::before,
.fpf-divider--text::after {
  content: '';
  height: 1px;
  flex: 1 1 auto;
  background: var(--colour-transparency-black-15);
}
.fpf-divider--text span {
  font-family: var(--fpf-font-text);
  font-size: 10px;
  line-height: 14px;
  color: var(--colour-neutral-20);
}

.fpf-link {
  font-family: var(--fpf-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--colour-neutral-20);
  text-decoration: underline;
}
.fpf-link:hover { color: var(--colour-accents-blue-40); }
.fpf-link--visited { color: var(--colour-accents-purple-30); }
.fpf-link--disabled {
  color: var(--colour-transparency-black-30);
  cursor: not-allowed;
  pointer-events: none;
}
.fpf-link--icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Toast · Tooltip · Progress · Spinner ─────────────────────── */
/* toast radius 4 · borda topo 8px · sombra 0 4 16 rgba(22,22,22,.1) */

.fpf-toast {
  --fpf-toast-color: var(--colour-neutral-20);
  border-radius: 4px;
  background: var(--colour-neutral-120);
  border-top: 8px solid var(--fpf-toast-color);
  border-right: 1px solid var(--fpf-toast-color);
  border-bottom: 1px solid var(--fpf-toast-color);
  border-left: 1px solid var(--fpf-toast-color);
  box-shadow: 0 4px 16px 0 rgba(22, 22, 22, 0.1);
  padding: 16px 12px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.fpf-toast--success { --fpf-toast-color: var(--colour-accents-green-50); }
.fpf-toast--info { --fpf-toast-color: var(--colour-accents-blue-30); }
.fpf-toast--alert { --fpf-toast-color: var(--colour-accents-yellow-30); }
.fpf-toast--error { --fpf-toast-color: var(--colour-accents-red-40); }
.fpf-toast__body {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fpf-toast__icon { flex: 0 0 24px; display: inline-flex; color: var(--fpf-toast-color); }
.fpf-toast__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.fpf-toast__title { font-family: var(--fpf-font-text); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--colour-neutral-20); }
.fpf-toast__message { font-family: var(--fpf-font-text); font-size: 14px; line-height: 20px; color: var(--colour-neutral-20); }
.fpf-toast__close {
  flex: 0 0 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--fpf-toast-color);
}

.fpf-tooltip {
  min-height: 20px;
  border-radius: 4px;
  background: var(--colour-neutral-20);
  padding: 2px 4px 4px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fpf-font-text);
  font-size: 12px;
  line-height: 16px;
  color: var(--colour-neutral-120);
}
.fpf-tooltip-arrow { color: var(--colour-neutral-20); display: inline-flex; }

.fpf-tooltip-wrapper {
  position: relative;
  display: inline-flex;
}
.fpf-tooltip-wrapper .fpf-tooltip-bubble {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 10;
}
.fpf-tooltip-wrapper:hover .fpf-tooltip-bubble,
.fpf-tooltip-wrapper:focus-within .fpf-tooltip-bubble {
  opacity: 1;
}
.fpf-tooltip-bubble--top {
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}
.fpf-tooltip-bubble--right {
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: row;
}
.fpf-tooltip-bubble--bottom {
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}
.fpf-tooltip-bubble--left {
  right: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: row-reverse;
}

.fpf-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fpf-progress__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fpf-progress__label { flex: 1 1 auto; font-family: var(--fpf-font-text); font-size: 12px; line-height: 16px; color: var(--colour-neutral-20); }
.fpf-progress__value { font-family: var(--fpf-font-text); font-size: 10px; line-height: 14px; text-align: right; color: var(--colour-neutral-20); }
.fpf-progress__bar {
  height: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fpf-progress__track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 500px;
  background: var(--colour-transparency-black-15);
  overflow: hidden;
}
.fpf-progress__fill {
  height: 4px;
  border-radius: 10px;
  background: var(--colour-neutral-20);
  transition: width .3s ease;
}
.fpf-progress__bump {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 500px;
  background: var(--colour-transparency-black-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--colour-neutral-20);
}
.fpf-progress__bump:hover { background: var(--colour-transparency-black-15); }
.fpf-progress__helper { font-family: var(--fpf-font-text); font-size: 12px; line-height: 16px; color: var(--colour-neutral-20); }

.fpf-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid var(--colour-transparency-black-15);
  border-top-color: var(--colour-neutral-20);
  animation: fpf-spin .9s linear infinite;
}
.fpf-spinner--sm {
  width: 24px;
  height: 24px;
  border-width: 3px;
}