/*
 * Manage saved accounts — payform account selection
 * -------------------------------------------------
 * Everything here is gated on .manageMode, which JS toggles on the account
 * list (see js/payform-manage-accounts.js).
 *
 * Scoped to .savedAccounts rather than .bank-transfer-methods: that class is
 * shared with noda / fpx / razer / razer_atome and the bank list in
 * payform.html, none of which have a manage mode.
 *
 * Deliberately free of brand variables — only transitions, positioning and
 * opacity — so this can live as a plain stylesheet instead of going through
 * the per-brand LESS build.
 */

/*
 * Entering manage mode reclaims the space the radio occupied:
 *  - the label's padding-left animates 4rem (s-pl-16) -> 1.5rem
 *  - the radio itself fades out
 *
 * The radio is absolutely positioned, so fading it doesn't affect layout —
 * only the label padding moves the content.
 */
.savedAccounts .boxOption > label {
  transition: padding-left 0.25s ease;
}

/*
 * Selecting an account is meaningless while editing, so the label stops
 * accepting clicks. The radios also get a real `disabled` attribute in JS,
 * which covers keyboard and form validation — this rule is about the cursor
 * and hover feedback.
 */
.savedAccounts.manageMode .boxOption > label {
  padding-left: 1.5rem;
  cursor: default;
  pointer-events: none;
}

.savedAccounts .bank-transfer-radio {
  transition: opacity 0.2s ease;
}
.savedAccounts.manageMode .bank-transfer-radio {
  opacity: 0;
  pointer-events: none;
}

/*
 * Remove control — a sibling of .boxOption, not inside it. The row wrapper is
 * the positioning context, so the button centres vertically against the box
 * whatever its height.
 *
 * Room is made by animating margin-right on .boxOption rather than padding on
 * the list: the list uses .s-space-y-3 for vertical rhythm, and padding there
 * would shift every row's left edge too. Margin on the box moves only its
 * right edge.
 */
.savedAccounts .accountRow {
  position: relative;
}

.savedAccounts .accountRow .boxOption {
  transition: margin-right 0.25s ease;
}
/* 2.75rem button + 0.75rem breathing room between it and the box */
.savedAccounts.manageMode .accountRow .boxOption {
  margin-right: 3.5rem;
}

.savedAccounts .accountRemove {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    color 0.12s ease;
}
.savedAccounts.manageMode .accountRemove {
  opacity: 1;
  pointer-events: auto;
}

/*
 * Pay button while editing. The disabled look comes from .s-disabled, which
 * the theme already defines per swatch — JS adds it. The only thing that
 * utility doesn't cover is the cursor.
 */
.submit_button:disabled {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .savedAccounts .boxOption > label,
  .savedAccounts .bank-transfer-radio,
  .savedAccounts .accountRow .boxOption,
  .savedAccounts .accountRemove {
    transition: none;
  }
}