.sub-nav__notifications {
  margin-top: 0;
  margin-bottom: 0;
}

.sub-nav__notification {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;

  &:not(:first-child) {
    padding-top: spacing(-2);
  }

  &:not(:last-child) {
    padding-bottom: spacing(-2);
    border-bottom: $width-border solid color('foreground-secondary');
  }

  button {
    flex-shrink: 0;
  }

  &--unread {
    .sub-nav__notification__timestamp {
      margin-top: spacing(-4);
      color: color('foreground-secondary');

      &::before {
        content: '';
        display: inline-block;
        margin-right: spacing(-4);
        width: .65rem;
        height: .65rem;
        background-color: color('utility-attention');
        border-radius: 50%;
      }
    }
  }
}

.notification {
  +.notification {
    margin-top: spacing(-2);
  }

  &.study-start {
    box-shadow: 0px 3.2px 9.6px 0px rgba(0, 0, 0, 0.4);
    &::before {
      content: '\e31b';
    }
  }
}