main#eat-app { position: relative; }
main#eat-app { background-color: white; }
main#eat-app > article { position: relative; height: 100%; padding: var(--m) var(--s); overflow-y: auto; }
main#eat-app > article { padding-bottom: calc(env(safe-area-inset-bottom) + var(--height-footer) + var(--l)); }

/* tracking footer */
.rainbow-footer { position: absolute; bottom: var(--s); right: var(--s); width: max-content; max-width: calc(100% - 2 * var(--s)); height: var(--height-footer); z-index: 9999; }
.rainbow-footer { display: flex; justify-content: center; align-items: center; }
.rainbow-footer { background-color: var(--accent-color2); border-radius: var(--m); }
.rainbow-footer { transition-delay: 0.6s; transition: 0.1s ease height, 0.1s ease padding-bottom; }

.rainbow-footer button.add { width: var(--height-footer); height: var(--height-footer); display: flex; justify-content: center; align-items: center; }

.rainbow-footer .plus { display: block; }
.rainbow-footer .close { display: none; }
.rainbow-footer .input-controls { display: none; }
.rainbow-footer.expanded { width: min(100vw - 2 * var(--m), 370px); }
.rainbow-footer.expanded .add { display: none; }
.rainbow-footer.expanded .close { display: block; }
.rainbow-footer.expanded .input-controls { display: flex; }
.rainbow-footer .input-controls input { font-size: inherit; font-family: inherit; height: calc(2 * var(--s)); padding: var(--s); border: none; border-radius: var(--s); }


.eat-form { display: grid; align-items: center; justify-content: stretch; }
.eat-form > * { grid-area: 1 / 1; padding: var(--m); }
.eat-form > label { pointer-events: none; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; }
.eat-form > input { width: 100%; font-family: inherit; font-size: 1.2em; }

/* Suggestions when typing */
/* eat-suggestions:empty { display: none; } */
eat-suggestions { position: absolute; top: 0; right: 0; transform: translate(0%, calc(-100% - var(--xs))); }
eat-suggestions { width: max-content; max-width: calc(100svw - 2 * var(--m)); max-height: calc(100svh - var(--offset, 0px) - var(--height-footer) - 2 * var(--m)); }
eat-suggestions { overflow-y: auto; }
eat-suggestions { background-color: var(--accent-color2); padding: var(--xs); border-radius: var(--s); }
eat-suggestions > div { display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 0.3rem; row-gap: 0.3rem; }
eat-suggestions rainbow-ingredient { padding: 0.1em 1em 0.1em 0.5em; border-radius: 1em; background-color: rgba(0,0,0,0.1); transition: background 0.3s ease-in-out; cursor: pointer; }
eat-suggestions rainbow-ingredient:hover { background-color: rgba(0,0,0,0.3); }


.input-controls { padding-inline: var(--s); column-gap: var(--s); }
/* .input-controls { position: relative; display: flex; align-items: center; justify-content: center; column-gap: 1.5rem; }
.input-controls { background-color: rgba(255,255,255,0.2); --webkit-backdrop-filter: blur(5px); --moz-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 2px solid white; border-radius: calc(var(--height-footer) / 2); box-shadow: 0 0 4px #b8616f44; }
.input-controls { width: calc(100% - 2 * var(--s)); width: max-content; height: 100%; padding-inline: 0.5rem; }
.input-controls { transition: width 0.3s ease; }
.input-controls input { height: 2.6rem; border-radius: 1.3rem; border: none; background-color: rgba(255,255,255,0.5); }
.input-controls label { color: var(--text-color); }
.input-controls > * { z-index: 2; } */


body:not(.animating-menu) .rainbow-footer { view-transition-name: footer; }
body:not(.animating-menu) .rainbow-footer button.close { view-transition-name: close-button; }
body:not(.animating-menu) .rainbow-footer button.add { view-transition-name: add-button; }

::view-transition-group(footer) {
  animation-duration: .5s;
}
::view-transition-old(footer),
::view-transition-new(footer) { animation: none; mix-blend-mode: normal; border-radius: var(--m); height: 100%; overflow: hidden; object-fit: cover; }

::view-transition-old(add-button) { animation: none; opacity: 0; }
::view-transition-new(add-button) { animation: none; opacity: 1; }