:host {
  @apply box-border grid items-center px-4 pt-0 overflow-hidden max-w-full;
  grid-auto-flow: column;
  grid-template-columns: 1fr auto;
  background-color: var(--shell-process-background);
}

ui-slider {
  @apply pt-2;
}

button.add {
  @apply flex justify-center items-center ml-4;

  .label {
    @apply font-bold text-base mr-2;
    color: var(--shell-process-add-label);
  }

  .symbol {
    @apply flex justify-center items-center rounded-full w-9 h-9 text-3xl;
    color: var(--shell-process-add-icon-text);
    background-color: var(--shell-process-add-icon-background);
  }
}

::ng-deep shell-process ui-slider {
  .next-wrapper {
    box-shadow: -40px 0px 40px #fff;
    button {
      box-shadow: -50px 20px 75px #fff;
    }
  }

  .prev-wrapper {
    box-shadow: 50px 0px 40px #fff;
    button {
      box-shadow: 75px 20px 75px #fff;
    }
  }
}
