.archive-navigation {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: .8rem;
  flex-wrap: wrap;
  &__link {
    padding: 0.4rem 1.6rem;
    border-radius: 6px;
    border: 1px solid $border-color;
    &:hover {
      border-color: $black-400;
      color: $black-600;
    }
    &--active {
      background-color: $blue;
      color: $white;
      &:hover {
        color: $white;
      }
    }
    &--disabled {
      background-color: $black-100;
      color: $black-400;
      cursor: not-allowed;
      &:hover {
        border-color: $border-color;
        color: $black-400;
      }
    }
  }
  &__input {
    padding: 0.4rem 0;
    border-radius: 6px;
    border: 1px solid $border-color;
    text-align: center;
    width: 80px;
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin: 0 0.8rem;
  }
}