.Notification {
  @apply grid gap-4 @container/notification;
}

.Notification-day + .Notification-day {
  .Notification-date {
    @apply before:absolute before:-left-[--space] before:top-0 before:w-[calc(100%_+_var(--space)*2)] before:border-b;
  }
}

.Notification-item {
  @apply relative py-4 after:absolute after:-left-[--space] after:bottom-0 after:w-[calc(100%_+_var(--space)*2)] after:border-b [&:last-child]:pb-0 [&:last-child]:after:content-none;
}

.Notification-date {
  @apply relative py-2 text-xs font-medium text-gray-500 after:absolute after:-left-[--space] after:bottom-0 after:w-[calc(100%_+_var(--space)*2)] after:border-b;
}

.Notification-info {
  @apply relative flex w-[100cqw] items-center gap-2 text-xs text-gray-500;
}

.Notification-info:has(.Notification-new) {
  @apply after:size-[0.625rem] after:bg-success-500 after:[clip-path:circle()];
}

.Notification-info:has(.Notification-error) {
  @apply before:btu-icon before:btu-icon-circle-alert before:me-1 before:text-error-700;
}

.Notification-title {
  @apply flex overflow-hidden;
}

.Notification-clear {
  @apply order-1 ms-auto;

  .Button-clearSingle {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error opacity-0 before:btu-icon before:btu-icon-x;
  }
}

.Notification-item:hover,
.Notification-item:focus-within {
  .Button-clearSingle {
    @apply opacity-100;
  }
}

.Notification-content {
  @apply mt-1 text-sm text-gray-500 [overflow-wrap:anywhere];
}

.Notification-pagination {
  @apply flex justify-end;
}

.Notification-actionBar {
  @apply mt-3 flex items-center justify-end gap-2;

  > .Notification-action button.Link {
    @apply btu-button btu-button-primary btu-button-sm;
  }

  a:not(.Actions-controlsList a) {
    @apply btu-button btu-button-primary btu-button-sm;
  }

  .Additional-actionsToggle {
    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-ellipsis aria-expanded:btu-button-pressed;
  }

  /* The preview link */
  > form.Notification-action {
    @apply -order-1 me-auto;
  }
}

.Notification-actionRefresh {
  @apply hidden;
}

.Notification-controls-toggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none before:btu-icon before:btu-icon-settings aria-expanded:btu-button-pressed;
}

.Notification-controls-menu.is-open {
  .Notification-controls-toggle {
    &:hover,
    &:focus {
      @apply before:btu-icon-circle-x;
    }
  }

  .Notification-controls-list.Dropdown {
    @apply Dropdown-is-open;
  }
}

.Popup[name='notifications'] {
  min-width: 360px;

  .Message.message-info {
    @apply mb-4;
  }
}

.Popup[name='notifications-pause-until'] {
  .Widget.ToolUserNotifications {
    @apply w-auto;
  }
}

.Notification-new,
.Notification-error {
  @apply flex items-center overflow-hidden;
}

.Notification-error .Notification-type,
.Notification-info:has(.Notification-error) a {
  @apply text-error-700;
}

.Actions-controls.is-open .Actions-controlsList {
  @apply Dropdown-is-open;
}

.Actions-controlsList > li > form.Notification-action {
  @apply contents;
}

.Actions-controlsList [role='menuitem'] {
  @apply Dropdown-item;
}

.Notification-type {
  @apply truncate;
}

.Notification-time {
  @apply flex before:size-[1.125rem] before:bg-gray-500 before:[clip-path:circle(0.1rem)];
}

.Notification-details {
  @apply mt-2 rounded-lg bg-gray-50 p-2 text-sm text-gray-500;
}

.Notification-contentError-errorInfoButton {
  &.is-active {
    @apply opacity-100;
  }
  .error-message {
    @apply hidden;
  }
}
.Notification-contentError {
  @apply max-h-[5dvh] overflow-y-scroll;

  &:hover {
    .Notification-contentError-errorInfoButton {
      @apply opacity-100;
    }
  }
}

.ToolUserNotifications .ActionBar .Button {
  @apply btu-button btu-button-fill-none btu-button-error btu-button-container-none;
}

/* Hides the add/remove buttons on Automatic Subscriptions */
.inputContainer[data-field='cms.notification.automaticSubscriptions/subscriptionOptions']
  > .RCIG
  > .RCIG-controls {
  @apply hidden;
}

.inputContainer[data-field='cms.notification.automaticSubscriptions/subscriptionOptions']
  > .RCIG
  > .RCIG-list
  > .RCIG-item {
  @apply grid-cols-[auto];

  > .RCIG-title {
    @apply bg-none;
  }

  > .RCIG-remove,
  > btu-dropdown {
    @apply hidden;
  }
}

/* Hides the effectively read-only subscription field needed to power other dynamic texts. */
[data-type='com.psddev.cms.notification.AutomaticToolSubscriptionOption']
  > [data-field-name='subscription'] {
  @apply hidden;
}
