/* Bounded source translation; provenance and omissions: docs/notification-style-map.md.
 * Mobile CSS SHA-256: 1364ff269b35eed18a754c744334b7cfc67517879af43cf40fe1e512b47fb107
 * Customer CSS SHA-256: 0fdfac21252cd8699914e3dcf07432357ec2f5a4c1f754bfe4d14470a4322cd0
 * Every rule is scoped to this notification theme. No animation is defined here.
 */
[data-source-theme="sfn-notifications"] {
  --font_default: "Inter";
  --color_text_default: rgba(26, 26, 26, 1);
  --color_primary_default: rgba(12, 41, 171, 1);
  --color_bTHBE_default: rgba(255, 239, 199, 1);
  --color_bTHAZ_default: rgba(251, 208, 203, 1);
  --color_bTGzq_default: rgba(235, 243, 255, 1);
  --color_bTHBQ_default: rgba(247, 247, 247, 1);
}

/* bTPMj / bTPWB generated fixed geometry, translated to the native aside.
 * bTRkv shares the authored geometry but declares a distinct zero bottom margin.
 * The source engine's generated stacking offset is not portable; use authored 21.
 */
[data-source-theme="sfn-notifications"][data-notify-panel] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  justify-content: flex-end;
  position: fixed;
  left: 0;
  right: 0;
  top: unset;
  bottom: 0;
  width: initial;
  min-width: 60px;
  max-width: 360px;
  min-height: 0;
  height: auto;
  max-height: 100%;
  margin-left: auto;
  border-radius: 0;
  opacity: 1;
  overflow: visible;
  z-index: 21;
}

[data-source-theme="sfn-notifications"][data-notify-surface="index_mobile"],
[data-source-theme="sfn-notifications"][data-notify-surface="customer"] {
  bottom: 40px;
  max-height: calc(100% - 40px);
}

/* RepeatingGroup_transparent_, bTPMp/bTPWD, and their single-column cells.
 * Six declared grid tracks do not truncate the projection; extra rows auto-flow.
 */
[data-source-theme="sfn-notifications"] .sfn-notification-list {
  display: grid;
  grid-template-rows: repeat(6, minmax(max-content, auto));
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-auto-flow: row;
  justify-items: stretch;
  gap: 0;
  align-self: stretch;
  min-width: 60px;
  min-height: 0;
  width: auto;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  order: 4;
  z-index: 2;
}

[data-source-theme="sfn-notifications"][data-notify-surface="customer"]
  .sfn-notification-list {
  min-width: 140px;
}

[data-source-theme="sfn-notifications"] .sfn-notification-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  box-sizing: content-box;
}

/* Text_body_16_ + exact mobile/customer text CSS; dynamic tones come from AST.
 * Staff row actions keep this exact text geometry; customer rows remain static.
 */
[data-source-theme="sfn-notifications"] .sfn-notification-row {
  white-space: pre-wrap;
  overflow: visible;
  overflow-wrap: break-word;
  font-family: var(--font_default);
  font-size: 16px;
  font-weight: 400;
  color: var(--color_text_default);
  text-align: right;
  line-height: 1.4;
  padding: 0 5px;
  border-top: 1px solid #6b6b6b;
  border-bottom: 1px solid #6b6b6b;
  border-left: 1px solid #6b6b6b;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background-color: var(--color_bTHBE_default);
  opacity: 1;
  align-self: flex-start;
  min-width: 60px;
  max-width: 100%;
  min-height: 20px;
  width: max-content;
  height: max-content;
  flex-grow: 0;
  margin: 0 0 5px;
  order: 1;
  z-index: 4;
}

[data-source-theme="sfn-notifications"] .sfn-notification-row--customer {
  background-color: var(--color_bTHAZ_default);
}

[data-source-theme="sfn-notifications"] .sfn-notification-row--general {
  background-color: var(--color_bTGzq_default);
}

[data-source-theme="sfn-notifications"] [data-notify-open] {
  cursor: pointer;
}
[data-source-theme="sfn-notifications"]
  [data-notify-open][aria-disabled="true"] {
  cursor: default;
}
[data-source-theme="sfn-notifications"] [data-notify-open]:focus-visible {
  outline: 2px solid var(--color_primary_default);
  outline-offset: -2px;
}

/* Group_transparent_ overridden by explicit bgcolor; bTPur / bTPZs CSS.
 * Toolbar is deliberately a sibling of the animated list.
 */
[data-source-theme="sfn-notifications"] .sfn-notification-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 0;
  overflow: visible;
  background-color: var(--color_bTHBE_default);
  border-top: 1px solid #6b6b6b;
  border-left: 1px solid #6b6b6b;
  border-right: 0;
  border-bottom: 0;
  border-radius: 10px 0 0 0;
  opacity: 1;
  align-self: flex-end;
  min-width: 80px;
  max-width: 80px;
  min-height: 0;
  width: 80px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  order: 1;
  z-index: 4;
}

[data-source-theme="sfn-notifications"] .sfn-notification-toolbar--customer {
  background-color: var(--color_bTHAZ_default);
}

/* Icon_standard_icon_ and retained 20px source CSS, not editor 30px dimensions.
 * Native button reset is isolated here; existing keyboard focus styling survives.
 */
[data-source-theme="sfn-notifications"] .sfn-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color_primary_default);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0;
  text-align: center;
  overflow: hidden;
  opacity: 1;
  cursor: pointer;
  align-self: flex-end;
  min-width: 20px;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
  width: 20px;
  height: 20px;
  flex-grow: 1;
  margin: 0;
  order: 1;
  z-index: 3;
}

[data-source-theme="sfn-notifications"] .sfn-notification-toggle {
  order: 2;
  margin-left: 10px;
  margin-right: 10px;
}

[data-source-theme="sfn-notifications"][data-notify-surface="customer"]
  .sfn-notification-toggle {
  align-self: flex-start;
}

[data-source-theme="sfn-notifications"] .sfn-notification-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Local pending/unavailable affordance; customer read-all is still held. */
[data-source-theme="sfn-notifications"] .sfn-notification-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

[data-source-theme="sfn-notifications"] .sfn-notification-icon:hover {
  filter: none;
}

[data-source-theme="sfn-notifications"][hidden],
[data-source-theme="sfn-notifications"] [data-notify-list][hidden] {
  display: none !important;
}

/* Local asynchronous feedback. This adds no source motion or row action and
 * does not change the source's 80px toolbar or the separate animated list. */
[data-source-theme="sfn-notifications"] .sfn-notification-read-status,
[data-source-theme="sfn-notifications"] .sfn-notification-open-status {
  order: 2;
  max-width: 360px;
  padding: 6px;
  color: var(--color_text_default);
  background: var(--color_bTHBE_default);
  font:
    12px/1.4 var(--font_default),
    sans-serif;
}
[data-source-theme="sfn-notifications"] .sfn-notification-read-status button,
[data-source-theme="sfn-notifications"] .sfn-notification-open-status button {
  margin: 4px 4px 0 0;
  min-height: 28px;
}
[data-source-theme="sfn-notifications"] [data-notify-read-status][hidden],
[data-source-theme="sfn-notifications"] [data-notify-open-status][hidden] {
  display: none !important;
}