/**
 * Currency switch — a two-state pill used wherever a price is shown.
 *
 * Shared by the listings toolbar and the apartment price block. It lives in its
 * own file so both can enqueue it without either owning it, and so the two can
 * never drift into looking slightly different.
 *
 * Geometry from the page it replaces: 28px buttons, 3px padding, 1px #767676
 * border, the pill sliding 28px to mark the active side.
 */

.deka-currency {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid var(--deka-grey-500);
  border-radius: var(--deka-radius-lg);
  background: var(--deka-surface-raised);
  line-height: 1;
  overflow: hidden;
}

.deka-currency__pill {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--deka-action);
  transition: transform var(--deka-duration-base) var(--deka-ease-emphasis);
  pointer-events: none;
}

/*
 * The pill follows whichever button is marked active, rather than a `data-active`
 * attribute repeated on a wrapper.
 *
 * That attribute was the bug: the listings toolbar carries it on .deka-currency
 * itself, but the apartment price block carries it on the outer .deka-price —
 * so `.deka-currency[data-active]` never matched there, the pill never moved off
 * the ₾ side, and the active `$` was rendered in white on the white track.
 * Invisible. Both call sites already keep this class in sync, so keying off it
 * cannot drift the way a duplicated attribute did.
 */
.deka-currency:has([data-currency='gel'].deka-currency__btn--active) .deka-currency__pill {
  transform: translateX(0);
}

.deka-currency:has([data-currency='usd'].deka-currency__btn--active) .deka-currency__pill {
  transform: translateX(28px);
}

.deka-currency__btn {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  font-family: inherit;
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-semibold);
  line-height: 1;
  color: var(--deka-text);
  cursor: pointer;
  transition: color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-currency__btn--active { color: var(--deka-action-text); }
.deka-currency__btn:not(.deka-currency__btn--active):hover { color: var(--deka-text-brand); }