:host {
  @apply block relative h-full;
}

shell-breadcrumb {
  @apply sticky z-sticky top-0;
}

shared-branch-selector {
  @apply w-[304px] transition-[width] duration-300 ease-in-out;
}

::ng-deep .tablet page-catalog shared-branch-selector {
  @apply w-[184px];
}

shared-branch-selector.shared-branch-selector-opend {
  @apply w-[814px];
}

::ng-deep page-catalog shared-branch-selector .shared-branch-selector-input-container {
  @apply rounded-[5px];
}

::ng-deep
  page-catalog
  shared-branch-selector
  .shared-branch-selector-input-container
  .shared-branch-selector-input-icon {
  @apply pl-2 border-l border-solid border-[#AEB7C1] transition-all duration-300 ease-in-out;
}

::ng-deep
  page-catalog
  shared-branch-selector.shared-branch-selector-opend
  .shared-branch-selector-input-container
  .shared-branch-selector-input-icon {
  @apply border-l-0;
}

::ng-deep .tablet page-catalog shared-breadcrumb:focus-within .shared-breadcrumb__suffix {
  @apply rounded-[5px];
}

::ng-deep .tablet page-catalog shared-breadcrumb:focus-within .shared-breadcrumb__suffix::before {
  @apply hidden;
}

::ng-deep page-catalog shared-branch-selector.shared-branch-selector-opend .shared-branch-selector-input-container {
  @apply rounded-br-none;
}
