.mealz-drawer-view-swapper {
  mealz-drawer {
    .visible {
      display: block;
    }

    .hidden {
      display: none;
    }

    mealz-recipe-details,
    mealz-basket-preview,
    mealz-store-locator-drawer {
      height: 100%;
    }

    .mealz-drawer:has(mealz-store-locator-drawer.visible),
    .mealz-drawer:has(mealz-supplier-selector.visible),
    .mealz-drawer:has(mealz-planner-catalog.visible),
    .mealz-drawer:has(mealz-recipe-details.from-planner-catalog) {
      transition: width 0.3s;
      width: 1000px;
    }

    @media (max-width: 1023px) {
      .mealz-drawer:has(mealz-store-locator-drawer.visible),
      .mealz-drawer:has(mealz-supplier-selector.visible),
      .mealz-drawer:has(mealz-planner-catalog.visible),
      .mealz-drawer:has(mealz-recipe-details.from-planner-catalog) {
        width: 100%;
      }
    }

    .mealz-drawer:has(mealz-history-drawer.visible),
    .mealz-drawer:has(mealz-basket-preview.visible) {
      transition: width 0.3s;
      width: 480px;
    }

    @media (max-width: 607px) {
      .mealz-drawer:has(mealz-history-drawer.visible),
      .mealz-drawer:has(mealz-basket-preview.visible) {
        width: 100%;
      }
    }
  }
}