.c-date-pagination {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
}
@media (min-width: 1024px) {
  .c-date-pagination {
    flex-flow: row nowrap;
    padding-inline: 56px;
    position: relative;
  }
}

.c-date-pagination__navigation {
  align-items: center;
  display: flex;
  flex-flow: nowrap row;
  gap: 28px;
  justify-content: center;
  margin-block-start: 12px;
  position: relative;
}
@media (min-width: 1024px) {
  .c-date-pagination__navigation {
    inline-size: 100%;
    inset-block: 0;
    inset-inline: 0;
    justify-content: space-between;
    margin-block: auto;
    position: absolute;
  }
  .c-date-pagination--no-prev .c-date-pagination__navigation {
    justify-content: flex-end;
  }
}

.c-date-pagination__prev,
.c-date-pagination__next {
  color: var(--si-color-black);
  position: relative;
  text-decoration: none;
}
.c-date-pagination__prev:hover, .c-date-pagination__prev:focus,
.c-date-pagination__next:hover,
.c-date-pagination__next:focus {
  color: var(--si-color-black);
  text-decoration: none;
}
.c-date-pagination__prev span,
.c-date-pagination__next span {
  background-image: linear-gradient(180deg, transparent 0, transparent calc(100% - 1px), currentColor calc(100% - 1px), currentColor 100%);
  background-position: 0 calc(100% - 0px);
  background-repeat: no-repeat;
  background-size: 0;
  display: inline;
  padding-bottom: 2px;
  position: relative;
  text-decoration: none;
  transition: background-size 0.2s cubic-bezier(0.37, 0, 0.63, 1);
  background-size: 100%;
  color: var(--si-color-black);
}
.c-date-pagination__prev span:hover, .c-date-pagination__prev span:focus,
.c-date-pagination__next span:hover,
.c-date-pagination__next span:focus {
  background-size: 100%;
  text-decoration: none;
}
.c-date-pagination__prev span:hover, .c-date-pagination__prev span:focus,
.c-date-pagination__next span:hover,
.c-date-pagination__next span:focus {
  background-size: 0;
}
.c-date-pagination__prev .icon,
.c-date-pagination__next .icon {
  block-size: 28px;
  inline-size: 28px;
  inset-block: -1px 0;
  margin-block: auto;
  position: absolute;
  transition: all 0.2s cubic-bezier(0.37, 0, 0.63, 1);
  transform: translateX(0);
}

.c-date-pagination__prev {
  padding-inline-start: 32px;
}
.c-date-pagination__prev .icon {
  inset-inline-start: 0;
}
.c-date-pagination__prev:hover .icon, .c-date-pagination__prev:focus .icon {
  transform: translateX(-4px);
}

.c-date-pagination__next {
  padding-inline-end: 32px;
}
.c-date-pagination__next .icon {
  inset-inline-end: 0;
}
.c-date-pagination__next:hover .icon, .c-date-pagination__next:focus .icon {
  transform: translateX(4px);
}