.wp-block-amnesty-core-term-list .navigation {
  margin-bottom: 48px;
  text-align: center;

  @include mq(small) {
    text-align: left;

    .rtl & {
      text-align: right;
    }
  }
}

.wp-block-amnesty-core-term-list .navigation button {
  appearance: none;
  border: none;
  margin: 1px;
  width: 75px;
  height: 75px;
  background-color: var(--wp--preset--color--grey-lighter);
  font-family: var(--wp--preset--font-family--secondary);
  font-size: var(--wp--preset--font-size--heading-4);
  font-weight: bold;
  color: var(--wp--preset--color--black);

  &[disabled] {
    color: var(--wp--preset--color--grey-base);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--wp--preset--color--grey-lighter);
      color: var(--wp--preset--color--grey-base);
      cursor: auto;
    }
  }

  &.is-active {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
  }

  &:hover,
  &:active,
  &:focus {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    transition: background-color .25s, color .25s;
    cursor: pointer;
  }
}

.wp-block-amnesty-core-term-list .listContainer {
  display: flex;
  align-items: stretch;
}

.wp-block-amnesty-core-term-list .activeLetter {
  flex-basis: 10%;
  font-family: var(--wp--preset--font-family--secondary);
  font-size: 80px;
  line-height: 1;
}

.wp-block-amnesty-core-term-list .listItems {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  list-style: none;
}

.wp-block-amnesty-core-term-list .listItem {
  display: inline-flex;
  flex: 1 1 100%;
  max-width: 100%;
  margin-bottom: 24px;
  padding-right: 12px;

  .rtl & {
    padding-right: 0;
    padding-left: 12px;
  }

  @include mq(x-small) {
    flex-basis: 50%;
    max-width: 50%;
  }

  @include mq(small) {
    flex-basis: 25%;
    max-width: 25%;
  }
}

.wp-block-amnesty-core-term-list .listItems a {
  text-decoration: none;
  color: inherit;

  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }
}

.rtl .wp-block-amnesty-core-term-list .navigation {
  @include mq(small) {
    text-align: right;
  }
}
