/* Settings -> Notifications below the card: a person's other devices, the
   badges, and the matrix of events by channel (W3, W5; boards 193-198). */

/* Your other devices. */
.push-own {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--c-neutral-2);
}
.push-own-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 190px;
  column-gap: 16px;
  align-items: center;
}
.push-own-name {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  min-width: 0;
}
.push-own-title {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font: var(--t-body-primary-400);
  color: var(--c-white);
}
.push-last,
.push-cellx {
  font: var(--t-body-small-300);
  color: var(--c-neutral-10);
  white-space: nowrap;
}
.push-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 4px;
}
.push-link {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: var(--t-body-small-400);
  color: var(--c-neutral-11);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-default), color var(--transition-default);
}
.push-link:hover {
  background: var(--c-neutral-1);
  color: var(--c-white);
}
.push-link-test,
.push-link-test:hover {
  font: var(--t-body-small-500);
  color: var(--c-blue-lighter);
}
.push-more {
  display: none;
}

/* Badges: outline, the colour of the status. */
.push-badge {
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 100px;
  border: 1px solid var(--c-neutral-6);
  font: var(--t-body-small-500);
  color: var(--c-neutral-10);
}
.push-badge-active {
  border-color: var(--c-green);
  color: var(--c-green);
}
.push-badge-failing {
  border-color: var(--c-orange);
  color: var(--c-orange);
}

/* What to tell me about, and where (§4.3). */
.push-matrix-intro {
  display: flex;
  flex-direction: column;
  row-gap: 3px;
}
.push-matrix {
  display: flex;
  flex-direction: column;
}
.push-matrix-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  column-gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--c-neutral-2);
}
.push-matrix-cols {
  padding: 0 0 8px;
  border-top: 0;
}
.push-col {
  text-align: center;
  font: var(--t-body-small-400);
  color: var(--c-neutral-9);
}
.push-event {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}
.push-event-name {
  font: var(--t-body-primary-400);
  color: var(--c-white);
}
.push-cell {
  display: flex;
  justify-content: center;
}
.push-cell-none {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}
.push-cell-always {
  font: var(--t-body-small-500);
  color: var(--c-neutral-10);
}

/* W5: the same page in a 390px column. Short labels and 56px columns in the
   matrix, and one menu per device instead of two links. */
@media (max-width: 767px) {
  .push-page {
    row-gap: 22px;
  }
  .push-wide {
    display: none;
  }
  .push-narrow {
    display: inline;
  }
  .push-card {
    padding: 16px;
    row-gap: 14px;
  }
  .push-card-title {
    font: var(--t-body-primary-500);
  }
  .push-toggle span {
    display: none;
  }
  .push-card-actions .button {
    width: 100%;
    height: 44px;
  }
  .push-own {
    padding: 8px 0;
  }
  .push-own-grid {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 44px;
  }
  .push-own .push-link {
    display: none;
  }
  /* W5 says what happened in the line under the name; no badge. */
  .push-own-title .push-badge {
    display: none;
  }
  .push-own.push-own-open .push-link {
    display: inline-flex;
  }
  .push-own.push-own-open .push-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .push-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font: var(--t-body-big-400);
    color: var(--c-neutral-10);
    cursor: pointer;
  }
  .push-matrix-row {
    grid-template-columns: minmax(0, 1fr) 56px 56px;
    column-gap: 8px;
    min-height: 52px;
    padding: 0;
  }
  .push-matrix-cols {
    min-height: 0;
    padding-bottom: 6px;
  }
  .push-matrix-lead {
    font: var(--t-body-primary-500);
    color: var(--c-white);
  }
  .push-event-name {
    font: var(--t-body-small-400);
    color: var(--c-neutral-12);
  }
  .push-matrix-intro .push-h {
    display: none;
  }
}