:host {
  @apply box-border;
}

.tab {
  @apply flex flex-row items-center justify-center pb-1;
  color: var(--shell-process-text-inactive);
  border-bottom: 3px solid transparent;
  margin-right: 1.875rem;

  h2 {
    @apply text-lg font-bold whitespace-nowrap py-1;
  }

  .close {
    @apply p-2;
    margin: -0.5rem -0.5rem -0.5rem 0;
  }
}

.badge {
  @apply flex flex-row items-center justify-center py-1 px-4 ml-2 rounded-full;
  background-color: var(--shell-process-badge-background);

  &.badge-active {
    @apply text-white;
    background-color: var(--shell-process-badge-active);
  }

  ui-icon {
    @apply mr-2;
  }

  span {
    @apply text-lg font-bold;
  }
}

.active {
  border-bottom: 3px solid var(--shell-process-border-active);
}
