modal-notifications {
  @apply flex flex-col relative h-full;

  h1 {
    @apply text-xl font-bold text-center mb-10;
  }

  .notification-card {
    @apply text-center text-xl text-inactive-branch block bg-white rounded-t-card font-bold no-underline py-4 border-none outline-none shadow-card -ml-4;
    width: calc(100% + 2rem);
  }

  modal-notifications-remission-group,
  modal-notifications-reservation-group,
  modal-notifications-task-calendar-group,
  modal-notifications-update-group {
    @apply flex flex-col relative pb-2;

    .header {
      @apply flex flex-row justify-center items-center mt-5;

      .notification-icon {
        @apply relative;

        .notification-counter {
          @apply absolute -top-2 -right-1 bg-brand text-white rounded-full w-5 h-5 flex items-center justify-center;
          z-index: 10;
        }

        ui-icon {
          @apply text-inactive-branch;
        }
      }

      h2 {
        @apply font-bold text-2xl ml-4;
      }
    }

    hr {
      @apply bg-disabled-branch h-px-2 -ml-4  my-4;
      width: calc(100% + 2rem);
    }

    .notification-list {
      @apply overflow-y-scroll -ml-4;
      max-height: calc(100vh - 450px);
      width: calc(100% + 2rem);
      overflow-x: hidden;
    }

    .actions {
      @apply grid justify-center mt-8;

      .cta-primary {
        @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap bg-brand text-white no-underline;
      }
    }
  }

  modal-notifications-list-item,
  modal-notifications-update-group {
    @apply flex flex-col relative py-1 px-4;

    .notification-headline {
      @apply flex flex-row justify-between items-start;

      h1 {
        @apply text-regular font-bold mb-2;
      }

      .notification-edit-cta {
        @apply bg-transparent text-brand text-base font-bold border-none px-1 -mr-1;
      }
    }
  }
}
