.notification-panel {
  padding-block: var(--spacing-2);
  padding-inline: 0;
  list-style: none;
}
.notification-panel-item {
  border-bottom: 1px solid var(--color-border-base-low);
  padding: 0;
  position: relative;
  &:last-child {
    border-bottom: none;
  }
  &.unread {
    &:before {
      content: "";
      width: 6px;
      height: 6px;
      background: var(--color-surface-primary);
      border-radius: var(--radius-round);
      position: absolute;
      right: var(--spacing-8);
      top: calc(50% - 3px);
    }
  }
  a {
    display: flex;
    padding-block: var(--spacing-6);
    padding-inline-start: var(--spacing-6);
    padding-inline-end: var(--spacing-16);
    gap: var(--spacing-4);
    text-decoration: none;
  }
  .notification-item-body {
    flex: 1;
    display: grid;
    white-space: nowrap;
  }
  .notification-icon {
    .avatar {
      background: var(--color-surface-primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .icon {
      width: 20px;
      height: 20px;
      fill: var(--color-text-primary);
    }
  }
}
.notification-blank {
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  align-items: center;
  min-width: 240px;
  .icon {
    width: 32px;
    height: 32px;
    fill: var(--color-text-base-disabled);
  }
  .notification-blank-text {
    color: var(--color-text-base-placeholder);
    white-space: nowrap;
    text-align: center;
  }
}