:host {
  @apply block relative;
}

.goods-in-list-headline {
  @apply text-center;
  margin-bottom: -16px;

  .goods-in-list-title {
    @apply text-2xl font-bold m-0;
  }

  .goods-in-list-paragraph {
    @apply text-2xl m-0 mb-6 mt-1;
  }
}

.filter-wrapper {
  @apply block relative;

  .hits {
    @apply text-inactive-branch font-semibold mb-3 absolute right-0 top-2;
  }

  ui-order-by-filter {
    @apply mx-auto;
  }
}

.cursor {
  @apply cursor-pointer;
}

ui-order-by-filter {
  @apply mb-2;
}

::ng-deep page-goods-in-list ui-scroll-container {
  .scroll-container {
    @apply bg-white;
  }
}

::ng-deep page-goods-in-list ui-scroll-container .cta-scroll {
  bottom: 32px !important;
}

.empty-message {
  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
}

hr {
  @apply bg-branch;
  height: 2px;
}

.actions {
  @apply fixed bottom-28 inline-grid grid-flow-col gap-7;
  left: 50%;
  transform: translateX(-50%);

  .cta-edit-ssc,
  .cta-save-ssc,
  .cta-cancel-ssc {
    @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap;

    &:disabled {
      @apply bg-inactive-branch border-inactive-branch;
    }
  }

  .cta-action-primary {
    @apply bg-brand text-white;
  }

  .cta-action-secondary {
    @apply bg-white text-brand;
  }
}

::ng-deep .desktop page-goods-in-list ui-scroll-container {
  .scrollbar-gap::-webkit-scrollbar-track {
    margin-bottom: 7.25rem;
  }
}
