/* PRE dynamic button. Pairs with assets/js/dynamic-button.js.
   Works on an existing .primary-btn: the label span gets .pre-dyn__label, the icon box .pre-dyn__icon. */
.pre-dyn { white-space: nowrap; }

.pre-dyn > :not(.pre-dyn__label) { flex-shrink: 0; }

.pre-dyn__label {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.pre-dyn__text,
.pre-dyn__glyph {
  display: inline-block;
}

.pre-dyn__text[data-leaving] {
  position: absolute;
  top: 0;
  left: 0;
}

.pre-dyn__icon {
  position: relative;
  overflow: hidden;
}

.pre-dyn__icon[hidden] { display: none; }

.pre-dyn__glyph {
  line-height: 1;
}

.pre-dyn__glyph[data-leaving] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pre-dyn__glyph svg { display: block; }

/* A tick should never spin with the house hover rotate. */
.pre-dyn[data-icon="check"] .pre-dyn__icon,
.pre-dyn[data-icon="check"]:hover .pre-dyn__icon { transform: none; }

.pre-dyn[data-icon="check"] .pre-dyn__glyph { padding-top: 2px; }

.pre-dyn[data-tone="success"] { border-color: rgba(143, 240, 192, .42); }

.pre-dyn[data-tone="success"] .pre-dyn__icon {
  background: #8ff0c0;
  color: #020304;
}