/* Notification bell icon in header */
.notification-bell {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  text-decoration: none;

  svg { width: 22px; height: 22px; }
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: var(--line-height-xs);
}

/* A notification settings category: each switch's description and its Push and Email rows */
.notification-settings {
  .notification-switch + .notification-switch {
    margin-top: var(--section-label-gap);
  }

  .notification-switch-desc {
    margin: 0;
    padding: var(--section-label-gap) var(--content-padding) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .push-setup-link {
    display: block;
    margin-top: 4px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);

    &[hidden] {
      display: none;
    }
  }

  .toggle-input:disabled + .toggle-slider {
    opacity: 0.4;
    cursor: default;
  }
}