.#{$n}-translation-options {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;

  // Top padding needed for the outline focus ring
  padding: $spacer * 0.05 0 0;
  list-style: none;
}

.#{$n}-translation-options__item--selected {
  margin-bottom: $spacer * 0.5;

  &::after {
    content: '';
    display: block;
    position: absolute;
    bottom: $spacer * -0.5;
    flex: 0 0 100%;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid $grey-b;
  }

  + .#{$n}-translation-options__item {
    margin-top: $spacer * 0.5;
  }
}

.#{$n}-translation-options__item {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-items: center;
  gap: $spacer * 0.5;
  width: 100%;
  padding: $spacer * 0.5 0;
  color: $brand3;
  font-size: $fontsize-small;
  font-weight: $fontweight-bold;
  cursor: pointer;

  &:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
  }

  span {
    margin-left: -0.5em;
  }

  .#{$n}-icon {
    display: flex;
    width: $iconsize-small;
    height: $iconsize-small;
    opacity: 0;
  }

  &[aria-selected='true'] .#{$n}-icon {
    opacity: 1;
  }
}