:host {
  @apply border border-solid border-[#C6CBD0] p-2 rounded min-w-[192px] max-w-[226px] h-[158px] grid grid-rows-3 cursor-pointer;
}

:host:focus {
  @apply outline-none;
}

:host.selected {
  @apply bg-[#D8DFE5] border-[#0556B4];
}

:host.disabled {
  @apply opacity-50 cursor-not-allowed bg-gray-100;
}

.purchase-options-tile__heading {
  @apply flex flex-row justify-center items-center;
}

.purchase-options-tile__heading .icon-wrapper {
  @apply bg-[#D8DFE5] w-[36px] h-[36px] rounded grid items-center justify-center;
}

.purchase-options-tile__heading.muted .icon-wrapper {
  @apply bg-transparent;
}

.purchase-options-tile__heading .purchase-option-name {
  @apply ml-3 font-bold text-lg;
}

.purchase-options-tile__body {
  @apply text-center text-p3;
}

.purchase-options-tile__actions {
  @apply flex flex-row justify-center items-center font-bold mt-2;
}

.muted {
  @apply text-[#AEB7C1];
}

::ng-deep app-pickup-purchase-options-tile shared-branch-selector.focused,
::ng-deep app-in-store-purchase-options-tile shared-branch-selector.focused {
  @apply visible;
}

::ng-deep app-pickup-purchase-options-tile shared-branch-selector .shared-branch-selector-input-container,
::ng-deep app-in-store-purchase-options-tile shared-branch-selector .shared-branch-selector-input-container {
  @apply rounded;
}

::ng-deep
  app-pickup-purchase-options-tile
  shared-branch-selector.shared-branch-selector-opend
  .shared-branch-selector-input-container,
::ng-deep
  app-in-store-purchase-options-tile
  shared-branch-selector.shared-branch-selector-opend
  .shared-branch-selector-input-container {
  @apply shadow-card;
}

::ng-deep app-pickup-purchase-options-tile shared-branch-selector ui-autocomplete .ui-autocomplete-output-wrapper,
::ng-deep app-in-store-purchase-options-tile shared-branch-selector ui-autocomplete .ui-autocomplete-output-wrapper {
  @apply max-h-[320px];
}
