/*
  notifications

  layout
  empty state
*/



/* layout */
/* ================================================================================ */
.pos-community-notification {
  padding: calc(var(--pos-padding-card) / 2);
  display: grid;
  grid-template-columns: min-content auto;
  align-items: start;
  gap: var(--pos-gap-section-elements);
}

  .pos-community-notification:not(:first-child) {
    border-block-start: 1px solid var(--pos-color-frame);
  }

.pos-community-notification aside {
  white-space: nowrap;

  font-size: .75em;
  color: var(--pos-color-content-text-supplementary);
}

  .pos-community-notification aside a {
    color: inherit;
  }


.pos-community-header-notifications-title {
  padding: calc(var(--pos-padding-card) / 2);
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-block-end: 1px solid var(--pos-color-frame);
  background-color: var(--pos-color-highlight-background);

  line-height: 1em;
  text-box-trim: trim-both;
  font-weight: 600;
  color: var(--pos-color-highlight-text);
}


.pos-community-notification .pos-avatar {
  margin-block-start: .2em;
}


/* empty state */
/* ================================================================================ */
.pos-community-notification-empty {
  padding: calc(var(--pos-padding-card) / 2);
}



/* how to enable notifications instructions in header popup */
/* ================================================================================ */
#pos-community-header-notifications-push-info {
  padding: calc(var(--pos-padding-card) / 2);

  border-block-start: 1px solid var(--pos-color-frame);
}

#pos-community-header-notifications-push-info-container {
  padding: calc(var(--pos-padding-card) / 2);
  position: relative;
  display: flex;
  gap: var(--pos-gap-section-elements);

  border-radius: var(--pos-radius-card);
  background-color: var(--pos-color-highlight-background);

  color: var(--pos-color-highlight-text);
}

#pos-community-header-notifications-push-info-container [data-icon="bell"] {
  width: calc(48px - var(--pos-padding-card) / 2 - .2rem);
  height: 48px;
  margin-block-start: .5rem;
  padding: .1rem;
  flex-shrink: 0;

  color: var(--pos-color-content-icon);
}

#pos-community-header-notifications-push-info.pos-community-header-notifications-push-info-requiresInstallForPush .pos-community-header-notification-push-info-intro {
  display: none;
}

#pos-community-header-notifications-push-info .pos-push-toggle {
  margin-block-start: .5rem;
}

/* dismiss button */
#pos-push-register-dismiss {
  padding: calc(var(--pos-padding-card) / 2);
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
}

  #pos-push-register-dismiss:hover {
    color: var(--pos-color-interactive-hover);
  }

  #pos-push-register-dismiss:active {
    color: var(--pos-color-interactive-active);
  }

  #pos-push-register-dismiss:focus-visible {
    outline: 2px solid var(--pos-color-focused);
    outline-offset: 2px;

    border-radius: var(--pos-radius-button);
  }

  #pos-push-register-dismiss svg {
    width: .5em;
    height: .5em;
  }

#pos-push-register-dismiss .pos-label {
  position: absolute;
  left: -300vw;
}