.#{$n}-choice-prompt {
  display: flex;
  flex-direction: column;
  gap: $spacer * 0.25;
  padding: 0;
}

.#{$n}-choice-prompt__item {
  display: block;
  width: 100%;
}

.#{$n}-choice-prompt__item .#{$n}-button {
  display: inline-block;
  white-space: normal;
}

.#{$n}-choice-prompt__item--secondary .#{$n}-button {
  padding: $spacer * 0.25 0;
  background-color: initial;
  color: $interaction;
}

.#{$n}-button--choose-again {
  display: flex;
  align-items: center;
  gap: $spacer * 0.5;
  margin: $spacer * 0.25 0;
  padding: 0;
  transition:
    margin $transition,
    color $transition;
  line-height: 1;

  &[aria-expanded='true'] {
    margin: $spacer 0 $spacer * 0.5;
  }
}

.#{$n}-button--choose-again .#{$n}-icon {
  display: flex;
  flex: 0 0 $iconsize-small * 0.5;
  align-items: center;
  justify-content: center;
  width: $iconsize-small * 0.5;
  height: $iconsize-small * 0.5;
  margin: 0;
  padding: 0;
  transform-origin: 50% 50%;
  transition: transform $transition;
}

.#{$n}-button--choose-again .#{$n}-icon path {
  fill: currentcolor;
}

.#{$n}-button--choose-again[aria-expanded='true'] .#{$n}-icon {
  transform: rotate(180deg);
}
