.#{$n}-divider {
  display: flex;
  position: relative;
  justify-content: center;
  margin: $spacer $spacer * -1 0;
  padding: $spacer * 3.25 $spacer * 1.5 0;
  overflow: hidden;
  background: linear-gradient(180deg, $white 0%, $grey-a 100%);
  background-repeat: no-repeat;
  background-size: 100% 2 * $spacer;
  line-height: 1.5;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 2 * $spacer;
    transform: translateX(-50%);
    background: radial-gradient(
      110px at 50% 300%,
      rgba($brand3, 0.5) 0%,
      rgba($white, 0) 99.99%,
      rgba($brand3, 0) 100%
    );
    background-repeat: no-repeat;
  }
}

.#{$n}-conversation__item:first-child .#{$n}-divider {
  margin-top: 0;
}

.#{$n}-divider--type-time-indicator {
  padding-top: $spacer * 3;
  padding-bottom: $spacer;

  &::before {
    display: none;
  }
}

.#{$n}-divider__graphic {
  position: absolute;
  top: $spacer * 2;
  left: 50%;
  width: $dividersize;
  height: $dividersize;
  transform: translate(-50%, -60%);
  border-radius: $borderradius-small;
  background-color: $white;

  .#{$n}-avatar,
  .#{$n}-icon,
  .#{$n}-icon svg {
    width: 100%;
    height: 100%;
  }
}

.#{$n}-divider__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $spacer * 0.25;
  max-width: $spacer * 15;
  text-align: center;

  .#{$n}-divider__title {
    margin: 0;
    font-size: $fontsize-small;
    font-weight: $fontweight-bold;
    line-height: 1.25;
  }

  .#{$n}-divider__description {
    font-size: $fontsize-small;
    line-height: 1.5;
  }

  .#{$n}-button {
    width: fit-content;
    padding: 0;
    font-size: inherit;
  }
}

.#{$n}-divider__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $spacer * 0.125;
  margin: 0;
  font-weight: $fontweight-regular;

  .#{$n}-divider__time--date,
  .#{$n}-divider__time--time {
    display: block;
    line-height: 1.25;
  }

  .#{$n}-divider__time--date {
    font-size: $fontsize-small;
    font-weight: $fontweight-bold;
  }

  .#{$n}-divider__time--time {
    font-size: $fontsize-default;
  }
}