:host {
  @apply block;
}

.main-wrapper {
  @apply fixed right-0 left-0 overflow-auto;
  top: 8.375rem;
  bottom: 5rem;

  main {
    @apply w-full max-w-content mx-auto px-4 self-stretch;
  }
}

.shell-header-wrapper {
  @apply fixed top-0 left-0 right-0 bg-white;

  shell-header {
    @apply w-full max-w-content mx-auto;
  }

  button.notifications-btn {
    @apply relative;

    .notification-counter {
      @apply absolute flex items-center justify-center top-2 right-px-3 text-sm rounded-full w-6 h-6 font-semibold;
      background-color: var(--shell-notification-counter-background);
      color: var(--shell-notification-counter-text);
      z-index: 10;
    }
  }
}

.shell-process-wrapper {
  @apply fixed left-0 right-0 bg-white;
  top: 5.125rem;

  shell-process {
    @apply w-full max-w-content mx-auto;
    height: 52px;
  }
}

shell-process {
  height: 52px;
  grid-area: process;
}

.shell-footer-wrapper {
  @apply fixed bottom-0 left-0 right-0 bg-white z-fixed shadow-card;

  shell-footer {
    @apply w-full max-w-content mx-auto;

    .active {
      @apply font-bold;
      color: var(--shell-footer-link-active);
    }
  }
}
