:root {
    --content-max-width: 900px;
    --z-index-popout: 500;
    
    /* Primary Colors: #F27B35 */
    --color-primary: #8D4E2B;
    --color-onprimary: #FFFFFF;
    --color-primary-container: #FFDBCB;
    --color-onprimary-container: #703716;
    /* Secondary Color */
    --color-secondary: #765849;
    --color-onsecondary: #FFFFFF;
    --color-secondary-container: #FFDBCB;
    --color-onsecondary-container: #5C4032;
    /* Tirtiary Colors: #6F8C04 */
    --color-tirtiary: #546524;
    --color-ontirtiary: #FFFFFF;
    --color-tirtiary-container: #D7EB9B;
    --color-ontirtiary-container: #3D4C0D;
    /* Error Colors */
    --color-error: #BA1A1A;
    --color-onerror: #FFFFFF;
    --color-error-container: #FFDAD6;
    --color-onerror-container: #93000A;
    /* Surface Colors */
    --color-surface: #FFF8F6;
    --color-onsurface: #221A16;
    --color-surface-variant: #F4DED4;
    --color-onsurface-variant: #52443D;
    /* Container Colors, low-to-high inidicates elevation */
    --color-surface-container-lowest: #FFFFFF;
    --color-surface-container-low: #FFF1EB;
    --color-surface-container: #FCEAE3;
    --color-surface-container-high: #F6E5DD;
    --color-surface-container-highest: #F0DFD8;
    /* Other Colors */
    --color-outline: #85736C;
    --color-outline-variant: #D7C2B9;
    --color-scrim: #000000;
    --color-shadow: #000000;



    /* RGBA of specific "--color" variables */
    --focus-state-primary: rgba(103, 80, 164, 0.078);
    --focus-state-onprimary: rgba(255, 255, 255, 0.08);
    --focus-state-onsecondary-container: rgba(74, 68, 88, 0.08);
    --focus-state-onsurface-variant: rgba(73 , 69, 79, 0.08);
    --drop-shadow-1: 0 1px 4px hsla(0, 0%, 50%, 0.5);
    --drop-shadow-2: 0 3px 4px hsla(0, 0%, 50%, 0.5);
    --drop-shadow-3: 0 6px 4px hsla(0, 0%, 0%, 0.5);
    --drop-shadow-4: 0 8px 4px hsla(0, 0%, 50%, 0.5);
    --drop-shadow-5: 0 12px 4px hsla(0, 0%, 50%, 0.5);
    --rounding-xs: 4px;
    --rounding-sm: 8px;
    --rounding-md: 12px;
    --rounding-lg: 16px;
    --rounding-xl: 28px;
    --rounding-fl: 50vh;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

input[type='checkbox']:checked + .material-symbols-rounded,
a.active > .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    font-family: "Roboto", serif;
}

h1>a,
h2>a {
    display: inline-block;
    height: 100%;
    width: auto;
    color: inherit;
    /* font-size: inherit; */
    text-decoration: none;
}

a > *,
button > * {
    pointer-events: none;
}

button:hover {
 cursor: pointer;
}

/* UTILITY STYLES */

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.display-none {
    display: none !important;
}

.button-signin-google {
    display: inline-block;
}

/*  TYPOGRAPHY */

.type-display {
    font-size: 2.8rem;
    font-weight: 400;
    font-family: "Cookie", sans-serif;
    line-height: 1.25;
}

.type-display-lg {
    font-size: 3.6rem;
    font-weight: 400;
    font-family: "Cookie", sans-serif;
    line-height: 1.25;
}

.type-display-sm {
    font-size: 2.25rem;
    font-weight: 400;
    font-family: "Cookie", sans-serif;
    line-height: 1.25;
}

.type-headline {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.25;
}

.type-headline-lg {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.25;
}

.type-headline-sm,
.modal-headline {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
}

.type-title {
    line-height: 1.25;
    font-weight: 500;
    font-size: 1rem;
}

.type-title-lg {
    line-height: 1.25;
    font-weight: 400;
    font-size: 1.375rem;
}

.type-title-sm {
    line-height: 1.25;
    font-weight: 500;
    font-size: 0.875rem;
}

.type-body,
p {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
}

.type-body-lg {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.type-body-sm,
label,
legend {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}

.type-label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
}

.type-label-lg {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.type-label-sm {
    font-size: 0.687rem;
    font-weight: 500;
    line-height: 1.45;
}

/* BUTTONS */

:is(.button-filled, .button-outlined, .button-text, .button-tonal),
:is(.icon-button, .icon-button-toggle, .icon-button-tonal) {
    box-sizing: content-box;
    position: relative;
    z-index: 0;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--rounding-fl);
}

:is(.button-filled, .button-outlined, .button-text, .button-tonal) {
    padding: 12px 24px;
    line-height: 1;
    /* matches .type-label-lg */
    font-size: 0.875rem;
    font-weight: 500;
}

:is(.icon-button, .icon-button-toggle, .icon-button-tonal) {
    margin: 4px;
    padding: 8px;
    line-height: 0;
    color: var(--color-onsurface-variant);
}

:is(.icon-button, .icon-button-toggle, .icon-button-tonal):hover {
    cursor: pointer;
}

:is(.button-filled, .button-outlined, .button-text, .button-tonal)::before,
:is(.icon-button, .icon-button-toggle, .icon-button-tonal)::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: background 180ms ease-in;
}

:is(.button-filled, .button-outlined, .button-text, .button-tonal):hover::before,
:is(.button-filled, .button-outlined, .button-text, .button-tonal):focus::before,
:is(.icon-button, .icon-button-toggle, .icon-button-tonal):hover::before,
:is(.icon-button, .icon-button-toggle, .icon-button-tonal):focus::before {
    transition: background 200ms ease-out;
}

/* tonal background */
:is(.button-tonal, .icon-button-tonal) {
    color: var(--color-onsecondary-container);
    background-color: var(--color-secondary-container);
    border: none;
}

:is(.button-tonal, .icon-button-tonal):disabled {
    /* todo: add disabled state styles */
}

:is(.button-tonal, .icon-button-tonal):not(:disabled):focus::before,
:is(.button-tonal, .icon-button-tonal):not(:disabled):hover::before {
    background-color: var(--focus-state-onsecondary-container);
}

/* filled background */
.button-filled {
    color: var(--color-onprimary);
    background-color: var(--color-primary);
    border: none;
}

.button-filled:not(:disabled):focus::before,
.button-filled:not(:disabled):hover::before {
    background-color: var(--focus-state-onprimary);
}

/* outlined */
.button-outlined {
    color: var(--color-onsurface-variant);
    background-color: var(--color-surface-container);
    border: 1px solid var(--color-outline);
}

.button-outlined:not(:disabled):focus::before,
.button-outlined:not(:disabled):hover::before {
    background-color: var(--focus-state-onsurface-variant);
}

:is(.button-text, .icon-button, .icon-button-toggle) {
    background-color: inherit;
    border: none;
}

/* default */
.button-text {
    color: var(--color-onsurface-variant);
}

:is(.icon-button, .icon-button-toggle) {
    color: var(--color-onsurface-variant);
}

:is(.button-text, .icon-button, .icon-button-toggle):not(:disabled):focus::before,
:is(.button-text, .icon-button, .icon-button-toggle):not(:disabled):hover::before {
    background-color: var(--focus-state-onsurface-variant);
}

/* toggle options */
.icon-button-toggle:not(:disabled):hover,
.icon-button-toggle:not(:disabled):focus {
    background-color: var(--focus-state-primary);
}

.icon-button-toggle > input[type='checkbox'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

/* FAB BUTTON */

.fab-button {
    box-sizing: content-box;
    padding: 16px;
    line-height: 0;
    color: var(--color-onprimary-container);
    background-color: var(--color-primary-container);
    border: none;
    border-radius: var(--rounding-lg);
    box-shadow: var(--drop-shadow-1)
}

a.fab-button {
    display: inline-block;
    text-decoration: none;;
}

.page-action-button > .fab-button {
    position: fixed;
    transform: translate(-100%, -100%);
}

/* TEXT FIELDS - OUTILNED
*/
.textfield-outlined {
    display: block;
    width: 100%;
}

.textfield-outlined input,
.textfield-outlined select,
.textfield-outlined textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 16px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-onsurface);
    border: 1px solid var(--color-outline);
    border-radius: var(--rounding-xs);
}

.textfield-outlined input,
.textfield-outlined textarea {
    line-height: 1.3125;
}

.textfield-outlined select {
    line-height: 1.5;
}

.textfield-outlined input::placeholder {
    color: var(--color-onsurface-variant);
}

.textfield-outlined textarea {
    resize: none;
}

/* CHECKBOX
*/
.checkbox-group > .checkbox {
    margin: 16px 0;
}

.checkbox {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 16px;
}

.checkbox > input[type="checkbox"] {  
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    appearance: none;
}

.checkbox > span:last-of-type {
    text-transform: capitalize;
}

input[type="checkbox"] ~ .icon-checkbox,
input[type="checkbox"]:checked ~ .icon-checkbox-blank {
    display: none;
}

input[type="checkbox"]:checked ~ .icon-checkbox,
input[type="checkbox"] ~ .icon-checkbox-blank {
    display: inline-block;
}

input[type="checkbox"] ~ .icon-checkbox {
    color: var(--color-primary);
}

input[type="checkbox"] ~ .icon-checkbox-blank {
    color: var(--color-onsurface-variant);
}

/*  CARD */

.card-filled,
.card-outlined {
    padding: 24px 16px 16px 16px;
    border-radius: var(--rounding-md);
    box-shadow: none;
}

.card-filled {
    background-color: var(--color-surface-container-highest); 
}

.card-outlined {
    color: var(--color-onsurface);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    transition: all 160ms ease-out;
}

.card-actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

.card-actions > a,
.card-actions > button {
    flex: 0 0 auto;
}

.card-headline {
    margin: 0 0 4px 0;
}

.card-subhead {
    margin: 0 0 24px 0;
    color: var(--color-onsurface-variant);
}

/* CAROUSEL */

.carousel,
.recipe-carousel {
    box-sizing: border-box;
    width: 100%;
    margin: 16px 0;
    padding: 0 0 0 16px;
    background-color: inherit;
}

.carousel-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 4px 0;
    background-color: inherit;
}

.carousel-list {
    box-sizing: border-box;
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    width: 100%;
    min-height: 130px;
    margin: 0;
    padding: 0;
    overflow: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.carousel-list::-webkit-scrollbar {
    display: none;
}

/* RECIPE CAROUSELS */

.recipe-carousel-card {
    flex: 0 0 calc(50% - 24px);
    box-sizing: border-box;
    position: relative;
    display: block;
    min-width: 180px;
    max-width: 280px;
    height: 100%;
    min-height: inherit;
    /* margin should match outline width on :focus-within */
    /* margin: 2px 0; */
    padding: 24px 16px 16px 16px;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--rounding-lg);
    scroll-snap-align: start;
}

.recipe-carousel-card:last-of-type {
    margin: 0 64px 0 0;
}

.recipe-carousel-card:focus-within {
    outline: 2px solid var(--color-outline);
}

.recipe-carousel-card > h3 {
    margin: 0 0 2px 0
}

.recipe-carousel-card > .card-actions {
    margin: 8px 0 0 0;
}

@media(min-width: 900px) {

    .recipe-carousel .carousel-list {
        flex-flow: row wrap;
        gap: 12px;
        overflow: unset;
    }

    .recipe-carousel .recipe-carousel-card {
        flex: 1 0 32%;
        margin: 0;
    }
}

/*  CHIP */

.chip-suggestion {
    padding: 4px 16px;
    color: var(--color-onsurface-variant);
    background-color: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--rounding-sm);
}

.chip-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-items: center;
}

ul.chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chip-list li {
    flex: 0 0 auto;
    margin: 0 8px 8px 0;
}

.chip-list li:last-of-type {
    margin: 0 0 8px 0;
}

/*  SEARCH */

.search-bar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-color: var(--color-surface-container-high);
    border-radius: var(--rounding-fl);
    box-shadow: var(--drop-shadow-1);
    /* overflow: hidden; */
}

.search-leading-icon {
    flex: 0 0 24px;
    margin: 0 8px 0 16px;
    color: var(--color-onsurface);
    line-height: 0;
}

.search-trailing-icon {
    margin: 0 8px;
}

.search-input {
    flex: 1 0 0%;
    min-width: 0;
    display: block;
    padding: 16px 8px;
    color: var(--color-onsurface);
    background-color: inherit;
    border: none;
}

/* MENU */

.menu-wrapper {
    position: relative;
    background-color: inherit;
}

dialog.menu {
    /* must overwrite user agent stylesheet to modify position */
    inset-inline: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--z-index-popout);
    min-width: 112px;
    max-width: 280px;
    padding: 0;
    color: var(--color-onsurface);
    background-color: var(--color-surface-container);
    border: 1px solid transparent;
    border-radius: var(--rounding-xs);
    box-shadow: var(--drop-shadow-2);
}

/* LISTS */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-item,
.list-item-recipe-note {
    padding: 8px 16px;
}

.list-item-recipe-note {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start
}

.list-item-recipe-note > p {
    flex: 1 0 0%;
}

/* "STEP #" ORDERED-LIST */

.list-stepped {
    counter-reset: step-count;
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-stepped > li::before {
    counter-increment: step-count;
    content: "Step " counter(step-count);
    /* matches .type-label */
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
}

/* TOPBAR */

.topbar,
.topbar-sm,
.topbar-md {
    display: flex;
    justify-content: flex-start;
    color: var(--color-onsurface);
    background-color: var(--color-surface-container);
}

.topbar,
.topbar-sm {
    flex-flow: row nowrap;
    align-items: center;
    padding: 8px 16px;
}

.topbar-md {
    box-sizing: content-box;
    flex-flow: row wrap;
    align-items: flex-start;
    padding: 20px 16px 24px 16px;
}

.topbar .topbar-headline,
.topbar-sm .topbar-headline {
    flex: 1 0 auto;
}

.topbar .topbar-headline {
    margin: 0 0 0 40px;
    text-align: center;
}

.topbar-md .topbar-headline {
    flex: 0 0 100%;
    order: 3;
}

.topbar-sm .topbar-navigation {
    margin: 0 8px 0 -12px;
}

.topbar-md .topbar-navigation {
    order: 1;
    margin: -12px 0 0 -12px;
}

.topbar-actions {
    background-color: inherit;
}

.topbar .topbar-actions,
.topbar-sm .topbar-actions,
.topbar-md .topbar-actions {
    display: flex;
    flex-flow: row nowrap;
}

.topbar .topbar-actions,
.topbar-sm .topbar-actions {
    flex: 0 0 auto;
    /* margin: 0 -12px 0 0 ; */
}

.topbar-md .topbar-actions {
    flex: 1 0 auto;
    justify-content: flex-end;
    order: 2;
    margin: -12px -12px 0 0 ;
}

/* BOTTOM BAR
*/
.bottombar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.bottombar-actions {
    display: flex;
    flex-flow: row nowrap;
}

.bottombar-actions > *:not(:last-child) {
    margin: 0 8px 0 0;
}

/* NAVIGATION BAR
*/
.navigation-bar {
    background-color: var(--color-surface-container);
}

.navigation-bar-list {
    box-sizing: border-box;
    display: flex;
}

ul.navigation-bar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation-bar-anchor {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--color-onsurface-variant);
    text-decoration: none;
    text-align: center;
}

.navigation-bar-anchor.active {
    color: var(--color-onsurface);
}

.navigation-bar-anchor > .icon {
    display: inline-block;
    width: 64px;
    padding: 4px 0;
    border-radius: var(--rounding-fl);
    transition: all 160ms ease-in;
}

.navigation-bar-anchor:hover > .icon {
    color: var(--color-onsecondary-container);
    background-color: var(--color-secondary-container);
    transition: all 200ms ease-out;
}

.navigation-bar-anchor.active > .icon {
    color: var(--color-onsecondary-container);
    background-color: var(--color-secondary-container);
}

/* Compact - navigation bar shown at the bottom of the screen */
@media (min-width: 0px) and (max-width: 599px) {
    .navigation-bar-list {
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }

    .navigation-bar-item {
        flex: 0 1 33%;
    }

    .navigation-bar-anchor {
        padding: 12px 0 16px 0;
    }

    .navigation-bar-anchor > .icon {
        width: 64px;
    }
}

/* Medium & Expanded - navigation bar shown vertically on the right hand side of the screen */
@media (min-width: 600px) {
    .navigation-bar {
        height: 100%;
    }

    .navigation-bar-list {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
        height: 100%;
    }

    .navigation-bar-item {
        flex: 0 0 auto;
    }

    .navigation-bar-anchor {
        padding: 1px 9px;
        white-space: nowrap;
    }

    .navigation-bar-anchor > .icon {
        width: 56px;
    }
}

/* LAYOUT
*/
.page-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-surface-container);
}

.page-main {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 0 88px 0;
    background-color: var(--color-surface-container-low);
    border-radius: var(--rounding-lg);
    overflow: auto;
}

.layout-default {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}

.layout-default > .page-header {
    flex: 0 0 auto;
}

.layout-default > .page-main {
    flex: 1 0 0%;
}

.layout-navbar {
    display: grid;
    justify-items: start;
    align-items: start;
    width: 100%;
    height: 100%;
}

.layout-navbar > .page-navigation,
.layout-navbar > .page-header,
.layout-navbar > .page-main {
    width: 100%;
}

.layout-navbar > .page-navigation {
    grid-area: nav;
}

.layout-navbar > .page-header {
    grid-area: header;
}

.layout-navbar > .page-main {
    grid-area: main;
}

@media (min-width: 0px) and (max-width: 600px) {
    .layout-navbar {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 'header' 'main' 'nav';
    }
}

@media (min-width: 600px) {

    .layout-navbar {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 'nav header' 'nav main';
    }

    .layout-navbar > .page-navigation {
        height: 100%;
    }

    .layout-default > .page-main,
    .layout-navbar > .page-main {
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        margin: 0 16px 16px 0; 
    }
}

.page-section {
    margin: 8px;
    padding: 16px 8px;
    background-color: inherit;
}

.page-action-button {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 16px;
}

.paper {
    margin: 8px;
    padding: 16px 8px;
    color: var(--color-onsurface);
    background-color: var(--color-surface-container);
    border-radius: var(--rounding-lg);
}

/* MODAL STYLES
*/
dialog.modal {
    box-sizing: border-box;
    width: calc(100% - 88px);
    min-width: 280px;
    max-width: 560px;
    padding: 24px;
    background-color: var(--color-surface-container-high);
    border: none;
    border-radius: var(--rounding-xl);
    /* box-shadow: var(--drop-shadow-3); */
}

dialog.modal::backdrop {
    background-color: var(--color-scrim);
    opacity: 0.4;
}

.modal-headline {
    margin: 0 0 16px 0;
}

.modal-body {
    margin: 0 0 24px 0;
}

.modal-actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0 0;
}

/* FORM LAYOUT */

.form-field-group {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

/* RECIPE NOTE MODAL */

#recipe-note-textfield {
    min-height: 130px;
}

/* RECIPE FORM */

#form-section-buttons {
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
}

.form-section {
    margin: 16px;
}

/* RECIPE FORM INGREDIENTS */

.form-ingredient {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.form-ingredient-fields {
    flex: 1 0 0%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.form-ingredient-actions {
    flex: 0 0 auto;
    margin: 28px 0 0 0;
}

.form-ingredient-amount > label {
    flex: 1;
    max-width: 50%;
}

@media (min-width: 0px) and (max-width: 600px) {
    .form-ingredient-fields,
    .form-ingredient-amount {
        gap: 8px;
    }

    .form-ingredient-amount,
    .form-ingredient-unit {
        flex: 1;
        max-width: 50%;
    }

    .form-ingredient-label {
        flex: 0 0 100%;
    }
}

@media (min-width: 600px) {
    .form-ingredient-fields,
    .form-ingredient-amount {
       gap: 12px;
    }

    .form-ingredient-amount,
    .form-ingredient-unit,
    .form-ingredient-label {
        flex: 1;
        max-width: 33%;
    }
}

/** RECIPE FORM DIRECTIONS **/

#form-directions-list li::before {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
}

.form-direction {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    margin: 32px 0;
}

.form-direction:last-of-type {
    margin-bottom: 0;
}

.form-direction-fields {
    flex: 1 0 0%;
}

.form-direction-actions {
    flex: 0 0 auto;
}

/* LOADING SPINNER */

.show-loading {
    position: relative;
}

.show-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform-origin: left top;
    display: block;
    width: 48px;
    height: 48px;
    border: 5px solid var(--color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation-direction: normal;
    animation-duration: 1000ms;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: loading-spinner;
    animation-timing-function: linear;
}

@keyframes loading-spinner {
    0% {
        opacity: 0.8;
        transform:rotate(0deg) translate(-50%, -50%);
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.8;
        transform: rotate(360deg) translate(-50%, -50%);
    }
}

/* AUTH & OAUTH PAGE */

#login-page .page-main,
#google-oauth-page .page-main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center
}

#login-container,
#oauth-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

#login-container h1,
#oauth-container h1 {
    margin: 32px 0 24px 0;
    color: var(--color-onsurface);
}

#login-container p:first-of-type {
    margin: 16px 0;
    color: var(--color-onsurface-variant);
}

#login-container .button-signin-google {
    display: block;
}

#login-container .button-signin-google::after {
    content: '';
    display: block;
    width: calc(100% - 80px);
    margin: 24px auto;
    border-bottom: 1px solid var(--color-outline-variant);
}

/** MYRECIPES CREATE, MYRECIPES EDIT **/

#recipe-form {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/** RECIPE DETAILS **/
#ingredients-list p,
#directions-list p {
    margin: 0;
}

#directions-list.list-stepped > li::before {
    line-height: 2;
    margin: 0 16px 0 0 ;
}

#ingredients-list .text-bold {
    font-weight: 500;
}

@media (min-width: 600px) {
    #recipe-details {
        display: flex;
        flex-flow: row wrap;
    }

    #recipe-details > section {
        flex: 1; 
    }
}