/* the ghosts are empty div, with just a width.
   They control the size of the menu, compacted
   and expanded. They are in the flow
   while the menu itself is out of the flow (position fixed).
   The grid width parameter "min-content" ony applied
   on content that are in the flow.
*/

:root {
    --menu-width-icon-base: 40px;
    --menu-width-text-base: 154px;
}

body {
  display: grid;
  grid-template-areas:'menu content';
  grid-template-columns: min-content auto ;
}

body > nav {
    grid-area: menu;
    --menu-scale: 1;
    --menu-width-icon: calc(var(--menu-width-icon-base) * var(--menu-scale));
    --menu-width-text: calc(var(--menu-width-text-base) * var(--menu-scale));
}

.ghost-with-icon {
    width: var(--menu-width-icon);
}

.ghost-with-text {
    width: var(--menu-width-text);
}

main {
    grid-area: content;
    z-index:0;
}

.img-logo {
    width: var(--menu-width-icon);
    height: var(--menu-width-icon);
    mix-blend-mode: multiply;
}

.pythonian-logo {
    width: var(--menu-width-text);
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-height: 850px) {
    .img-logo {
        display: none;
    }
}

@media (max-height: 850px) {
    .pythonian-logo {
        display: none;
    }
}


.pythonian-logo-home {
    width: 150px;
    padding-left: 5px;
    padding-right: 5px;
}

.basket-view {
  display: grid;
  grid-template-areas:'basket-list basket-editor';
  grid-template-columns: min-content auto ;
  gap: 20px;
}


.basket-list.narrow {
    width: 2em;
}

.basket-list.wide {
    width: 23em;
}