/*
 * Side-basket cart flyout (con_products Show/SideBasket.html partial + JS-injected
 * ProductEcosystem.html markup -- sideBasket.js/con_products.js clone that partial's DOM into the
 * flyout at runtime for the accessory-selection step, so "#submitRequestWithParts"/
 * ".productEcosystem__*"/".side-basket__main-input" below have no static counterpart in
 * SideBasket.html itself, but are genuinely reachable). Ported 1:1 from Scss/Content/_products.scss
 * -- this was the first of that file's two remaining scopes (cart vs. compare box, see
 * product-detail.css's own header comment for why they were split out from the product detail
 * page's own migration earlier). ".orders__title"/".orders__input-group" (bare, no ancestor) stay
 * out of scope here -- they live in orders.css already, loaded on this same partial (see its own
 * <f:asset.css> tag), since QuantityInput.html is shared between this flyout and Family/Orders.html.
 *
 * Layer note: pages/product-detail.scss targets .productEcosystem__cat (display:grid, glass card)
 * and .multi-select__submit (all:unset) -- both are scoped so they apply in this flyout too.
 * Image divs are renamed (side-basket__selected-item-img / side-basket__offering-img) to avoid the
 * pages rule for .productEcosystem__img (160px). The glass-card look on .productEcosystem__cat is
 * desirable in the flyout. The pointer cursor lost to the multi-select__submit all:unset is restored
 * globally for all enabled buttons (4-elements/_elements.scss, shame layer).
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer organisms {
  .side-basket__bg-layer {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background-color: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--motion-ease);
  }
  .side-basket__bg-layer.open {
    opacity: 0.6;
    pointer-events: auto;
  }
  .side-basket {
    position: fixed;
    inset: 0 0 0 auto;
    width: 100%;
    background-color: var(--shade-white);
    z-index: 10002;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--motion-base) var(--motion-ease);
    border-radius: var(--border-radius-default) 0 0 var(--border-radius-default);
  }
  @media (min-width: 640px) {
    .side-basket {
      width: min(50.1875rem, 92vw);
    }
  }
  @media (min-width: 992px) {
    .side-basket {
      width: min(50.1875rem, 50vw);
    }
  }
  .side-basket.open {
    transform: none;
  }
  .side-basket__inner {
    --side-basket-content-offset: calc(6.25rem + var(--gap-l));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: var(--padding-xl);
    padding-block-end: 0;
    gap: var(--gap-xl);
  }
  .side-basket__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-m);
  }
  .side-basket__top-title {
    margin: 0;
  }
  .side-basket__top .side-basket__close {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary-anthracite);
    flex-shrink: 0;
    transition: color var(--motion-base) var(--motion-ease);
  }
  .side-basket__top .side-basket__close .icon-x {
    font-size: 1.5rem;
    line-height: 1;
  }
  .side-basket__top .side-basket__close:hover {
    color: var(--color-primary-orange);
  }
  .side-basket__main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
  }
  .side-basket__main-top {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-l);
  }
  .side-basket__image {
    flex-shrink: 0;
    width: 6.25rem;
  }
  .side-basket__image img {
    display: block;
    width: 100%;
    height: auto;
  }
  .side-basket__details {
    flex: 1;
    min-width: 0;
  }
  .side-basket__details p {
    margin: 0 0 var(--gap-s);
  }
  .side-basket__details p:last-child {
    margin-bottom: 0;
  }
  .side-basket__block-title {
    margin-top: 0;
    margin-bottom: var(--gap-m);
  }
  @media (min-width: 640px) {
    .side-basket__variant,
    .side-basket__selected-parts > .side-basket__block-title {
      padding-left: var(--side-basket-content-offset);
    }
  }
  .side-basket__variant,
  .side-basket__selected-parts {
    display: none;
  }
  .side-basket__variant:has(.orders__title),
  .side-basket__selected-parts:has(.orders__title) {
    display: block;
  }
  .side-basket__variant:has(.orders__title) + .side-basket__selected-parts:has(.orders__title) {
    border-top: var(--border-default-width) solid var(--shade-grey-100);
    padding-top: var(--gap-xl);
  }
  .side-basket__selected-item {
    display: none;
  }
  .side-basket__selected-item:has(.orders__title) {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-l);
    margin-bottom: var(--gap-xl);
  }
  .side-basket__selected-item.hidden {
    display: none;
  }
  .side-basket__selected-item-img {
    flex-shrink: 0;
    width: 6.25rem;
  }
  .side-basket__selected-item-img img {
    display: block;
    width: 100%;
    height: auto;
  }
  .side-basket__selected-item > div:last-child {
    flex: 1;
    min-width: 0;
  }
  .side-basket__selected-item > div:last-child p {
    margin-top: 0;
    margin-bottom: var(--gap-s);
  }
  .side-basket__addings {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
    padding-top: var(--gap-xl);
  }
  .side-basket__addings > p {
    margin: 0;
  }
  .side-basket .productEcosystem__cat > div {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-l);
    min-width: 0;
  }
  .side-basket__offering-img {
    flex-shrink: 0;
    width: 6.25rem;
  }
  .side-basket__offering-img img {
    display: block;
    width: 100%;
    height: auto;
  }
  .side-basket__content-right {
    flex: 1;
    min-width: 0;
  }
  .side-basket__content-right p {
    margin-top: 0;
    margin-bottom: var(--gap-s);
  }
  .side-basket .input-group > * {
    min-block-size: 3rem;
  }
  .side-basket .side-basket__offer-cart:not(:disabled) .icon-shopping-cart::before {
    content: "\e753";
  }
  .side-basket #submitRequestWithParts {
    display: none;
    margin-bottom: var(--gap-l);
  }
  .side-basket #submitRequestWithParts > a {
    color: var(--body-text-color);
    text-decoration: underline;
    margin: var(--gap-xl) auto 0;
    display: block;
    text-align: center;
  }
  .side-basket__submit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m);
    padding: var(--gap-xxl) var(--padding-xl);
    margin: auto calc(-1 * var(--padding-xl)) 0;
    position: sticky;
    inset-block-end: 0;
    z-index: 0;
    background: var(--glass-white);
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.1);
    backdrop-filter: blur(30px);
  }
  .side-basket__submit :is(.btn, .btn-hollow) {
    white-space: nowrap;
  }
  @media (max-width: 639px) {
    .side-basket__submit :is(.btn, .btn-hollow) {
      width: 100%;
    }
  }
}