:root {
    --app-bg-color: #EBEBEB;
    --island-bg-color: #fff;
    
    --main-color: #CC003A;
    --text-on-main-color: #fff;

    --secondary-color: #CC5274;

    --third-priority-color: #FFE5ED;

    --main-grey-color: #735C62;

    --secondary-grey-color: #736266;

    --low-priority-grey-color: #999194;

    --input-text-color: #000;

    --link-color: var(--secondary-color);

    --safe-zone-one-side-padding: 0.5rem;

    --island-border-radius: 1rem;

    --default-box-shadow: 2px 2px 8px rgb(0, 0, 0, 0.2);
    --default-text-shadow-color: rgb(0, 0, 0, 0.5);

    --placeholder-icon-one-side-size: 5rem;
    --placeholder-font-size: 1.125rem;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    display: flex;
    flex-direction: column;
    padding: var(--safe-zone-one-side-padding);
    background-color: var(--app-bg-color);
    height: 100dvh;
    font: var(--default-regular-text-font);
}

#main-router-host {
    height: 100%;
    flex-grow: 1;
    min-width: 0;
}

.island {
    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: calc(2 * var(--safe-zone-one-side-padding));
}

.overlay, .modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2;

    transition: opacity 0.1s ease-in;
    opacity: 1;

    backdrop-filter: brightness(50%);

    @starting-style {
        opacity: 0;
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    body {
        flex-direction: row;
        gap: var(--safe-zone-one-side-padding);
    }

    .overlay, .modal {
        z-index: 3;
    }
}
:root {
    --heading2-font: bold 32px 'Roboto Condensed', ui-sans-serif;
    --heading3-font: bold 24px 'Roboto Condensed', ui-sans-serif;
    --heading4-font: bold 16px 'Roboto Condensed', ui-sans-serif;

    --default-regular-text-font: normal 14px/150% 'Comfortaa', ui-sans-serif;
    --default-bold-text-font: bold 14px/150% 'Comfortaa', ui-sans-serif;

    --additional-text-font: normal 12px 'Inter', ui-sans-serif;
    --additional-bold-text-font: bold 12px 'Inter', ui-sans-serif;
    
    --link-font: var(--additional-text-font);
}


@font-face {
    font-family: 'Comfortaa';
    src: url(assets/fonts/Comfortaa-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'Inter';
    src: url(assets/fonts/Inter-VariableFont_opsz,wght.ttf);
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url(assets/fonts/RobotoCondensed-VariableFont_wght.ttf);
}
.not-found-component__host {
    background-color: purple;
}
.auth-component__host {
    background-color: aqua;
    display: block;
}

.auth-component__bgImg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30vh;
    object-fit: cover;
}

.auth-component__authRouterHost {
    position: fixed;
    left: 50%;
    top: calc(30vh - 2rem);
    translate: -50% 0;
    height: 70vh;
    width: 90vw;
    border-radius: 1rem;
    overflow: hidden;
    padding: 2.5rem 1.5rem;
    background-color: var(--island-bg-color);
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.25);
}

.auth-component__logo {
    position: fixed;
    left: 1rem;
    top: 1rem;
    background-color: var(--island-bg-color);
    padding: 0.5rem 1rem;
    border-radius: var(--island-border-radius);
    box-shadow: var(--default-box-shadow);
    z-index: 2;
}

@media (min-width: 960px) {
    .auth-component__bgImg {
        position: fixed;
        top: 0;
        right: 0;
        left: unset;
        width: 50%;
        height: 100%;
    }

    .auth-component__authRouterHost {
        left: 25%;
        top: 50%;
        translate: -50% -50%;
        height: 70vh;
        width: 30vw;
        min-width: 500px;
        border-radius: 1rem;
        overflow: hidden;
    }
}
.logo-component__host {
    display: flex;
    align-items: center;
    gap: 4px;
    
    &:hover {
        cursor: pointer;
    }
}

.logo-component__icon {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 8px;
    overflow: hidden;
}

.logo-component__logoName {
    font-size: 1rem;
    color: var(--main-grey-color);
}
.email-input-component__host {
    display: inline-block;
}

.email-input-component__emailInput {
    width: 100%;
    padding: 12px 20px;
    border-radius: 2rem;
    outline: none;
    border: 1px solid var(--low-priority-grey-color);
    font: var(--default-regular-text-font);
    color: var(--input-text-color);
}
.login-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.login-component__title {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.login-component__form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-component__formControls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.login-component__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.login-component__link {
    font: var(--link-font);
    color: var(--link-color);
}

.login-component__enterBtn {
    width: min-content;
    padding: 1rem 2rem;
    outline: none;
    border: none;
    background-color: var(--main-color);
    color: var(--text-on-main-color);
    border-radius: 2rem;
    align-self: center;
    font: var(--default-regular-text-font);
}
:root {
    --nav-panel-mobile-height: calc(0.5rem*2 + 0.25rem*2 + 2rem);
}

.nav-component__host {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px -4px 8px 0px rgba(34, 60, 80, 0.2);
    background-color: var(--island-bg-color);
    z-index: 2;
}

.nav-component__navList {
    display: flex;
    justify-content: space-evenly;
    padding: 0.5rem 0;
}

.nav-component__navListItem {
    list-style-type: none;
}

.nav-component__navListItemLink {
    display: flex;
    align-items: center;
    padding: 0.25rem;
}

.nav-component__navListItemLinkText {
    display: none;
    pointer-events: none;
}

.nav-component__navListItemLinkIcon {
    mask-size: cover;
    mask-position: center;
    height: 2rem;
    width: 2rem;
    display: inline-block;
    background-color: var(--main-grey-color);
    pointer-events: none;
}

.nav-component__navListItemLink_active {    
    background-color: var(--main-color);
    border-radius: 8px;
    overflow: hidden;

    & .nav-component__navListItemLinkIcon {
        background-color: var(--text-on-main-color);
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    .nav-component__host {
        order: -1;
        bottom: unset;
        left: unset;
        right: unset;
        top: unset;
        box-shadow: unset;
        border-radius: 1rem;
        position: relative;
        background-color: var(--island-bg-color);
    }

    .nav-component__nav {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 2rem;
    }

    .nav-component__logo {
        position: absolute;
        z-index: 2;
        top: 1rem;
        left: 1rem;
    }

    .nav-component__navList {
        flex-direction: column;
        justify-content: unset;
        padding: unset;
        gap: 1rem;
    }

    .nav-component__navListItemLink {
        gap: 0.25rem;
        padding: 0.5rem 1rem;
        text-decoration: none;
    }

    .nav-component__navListItemLinkText {
        display: inline;
        color: var(--main-grey-color);
    }

    .nav-component__navListItemLink_active {    
        & .nav-component__navListItemLinkText {
            color: var(--text-on-main-color);
        }
    }
}
.password-input-component__host {
    display: inline-block;
}

.password-input-component__passwordInput {
    width: 100%;
    padding: 12px 20px;
    border-radius: 2rem;
    outline: none;
    border: 1px solid var(--low-priority-grey-color);
    font: var(--default-regular-text-font);
    color: var(--input-text-color);
}
.price-list-component__prices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.price-list-item-component__price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.price-list-item-component__priceName {
    color: var(--main-grey-color);
    font: var(--default-bold-text-font);
}
.price-input-component__input {
    width: 90px;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    font: var(--default-regular-text-font);
    display: inline-block;

    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}
.home-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: var(--nav-panel-mobile-height);

    overflow-y: auto;
    scrollbar-width: none;

    --widget-default-height: 300px;
}

/* DESKTOP */
@media (min-width: 960px) {
    .home-component__host {
        margin-bottom: unset;
        padding-bottom: unset;
    }
}
.island-btn-component__host {
    display: flex;
}

.island-btn-component__btn {
    outline: none;
    border: none;

    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;

    border-radius: var(--island-border-radius);
    background-color: var(--island-bg-color);
    padding: calc(var(--safe-zone-one-side-padding) * 2);

    &:hover {
        cursor: pointer;
    }
}

.island-btn-component__icon {
    width: 1rem;
    height: 1rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
    rotate: 180deg;
}

.island-btn-component__text {
    font: var(--default-bold-text-font);
    color: var(--secondary-grey-color);
}
.fav-recipe-widget-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.fav-recipe-widget-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.fav-recipe-widget-component__feed {
    height: var(--widget-default-height);
    overflow-y: auto;
    scrollbar-width: none;
}
.custom-price-widget-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.custom-price-widget-component__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-price-widget-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.custom-price-widget-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-size: cover;

    &:hover {
        cursor: pointer;
    }
}

.custom-price-widget-component__priceList {
    height: var(--widget-default-height);
    overflow-y: auto;
    scrollbar-width: none;
}

/* DESKTOP */
@media (min-width: 960px) {
    .custom-price-widget-component__header {
        gap: 0.5rem;
        justify-content: flex-start;
    }
}
.profile-plate-component__host {
    display: flex;
}

.profile-plate-component__plate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.325rem 1rem;
    background-color: var(--third-priority-color);
    border-radius: var(--island-border-radius);
}

.profile-plate-component__photo {
    width: 3rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
}

.profile-plate-component__name {
    color: var(--main-color);
}
.profile-widget-component__host {
    display: flex;
}

.profile-widget-component__plate {
    flex-grow: 1;
}
.planner-widget-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.planner-widget-component__header {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.contacts-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.contacts-component__heading {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.contacts-component__content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.contacts-component__link {
    font: var(--link-font);
    color: var(--link-color);
}

.contacts-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}
.empty-fav-recipes-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.empty-fav-recipes-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-fav-recipes-placeholder-component__text {
        width: 400px;
    }
}
.empty-custom-price-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.empty-custom-price-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-custom-price-placeholder-component__text {
        width: 400px;
    }
}
.default-btn-component__btn {
    outline: none;
    border-radius: 2rem;
    padding: 1rem 1.5rem;
    background-color: var(--main-color);
    color: var(--text-on-main-color);
    border: none;
    font: var(--default-regular-text-font);

    &:hover {
        cursor: pointer;
    }
}

.default-btn-component__transparentBg {
    background-color: transparent;
    color: var(--low-priority-grey-color);
}
.recipe-feed-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.recipe-feed-component__recipeFeedMain {
    flex-grow: 1;
    min-height: 0;
}
.fav-recipe-switch-component__icon {
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--low-priority-grey-color);
}

.fav-recipe-switch-component__active {
    background-color: var(--main-color);
}
.column-switch-component__switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.column-switch-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--low-priority-grey-color);
}

.column-switch-component__options {
    display: flex;
}

.column-switch-component__optionValue {
    font: var(--additional-bold-text-font);
    color: var(--low-priority-grey-color);
}

.column-switch-component__active {
    color: var(--main-color);
}
.time-switch-component__switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.time-switch-component__clockIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.time-switch-component__arrows {
    display: flex;
}

.time-switch-component__arrowIcon {
    height: 1rem;
    aspect-ratio: 10/14;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--low-priority-grey-color);
}

.time-switch-component__arrowDown {
    rotate: 180deg;
}

.time-switch-component__active {
    background-color: var(--main-color);
}

.recipe-filters-component__host {
    display: flex;
    align-items: center;
}

.recipe-filters-component__favSwitch {
    margin-right: auto;
}

.recipe-filters-component__columnsSwitch {
    margin-right: 1rem;
}

.recipe-feed-main-component__host {
    display: flex;
}

.recipe-feed-main-component__recipe {
    display: flex;
    flex-direction: column;
}

.recipe-feed-main-component__recipeName {
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
    word-break: break-all;
}

.recipe-feed-main-component__nothingFoundPlaceholder {
    width: 100%;
}
.recipe-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.recipe-overlay-component__content {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    padding-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.recipe-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.recipe-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .recipe-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.nothing-found-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nothing-found-placeholder-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.nothing-found-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
    margin-bottom: 1rem;
}
.recipe-plate-component__host {
    display: flex;
    position: relative;

    &:hover {
        cursor: pointer;
    }

    --inner-side-padding: 0.5rem;
}

.recipe-plate-component__photoPreview {
    width: 100%;
    border-radius: var(--island-border-radius);
    overflow: hidden;
}

.recipe-plate-component__favSwitch {
    position: absolute;
    top: var(--inner-side-padding);
    left: var(--inner-side-padding);
}

.recipe-plate-component__timePlate {
    position: absolute;
    top: var(--inner-side-padding);
    right: var(--inner-side-padding);
}

.recipe-plate-component__portions {
    position: absolute;
    left: var(--inner-side-padding);
    bottom: var(--inner-side-padding);
}

.recipe-plate-component__sign {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: saturate(0.5) brightness(0.5);
    border-radius: var(--island-border-radius);
}

.recipe-plate-component__doneSignText {
    font: var(--heading3-font);
    color: var(--secondary-color);
    rotate: 15deg;
    text-shadow: 0 0 2px var(--default-text-shadow-color);
}

.recipe-plate-component__addBtn {
    position: absolute;
    right: var(--inner-side-padding);
    bottom: var(--inner-side-padding);
}

.recipe-plate-component__squareRatio {
    aspect-ratio: 1/1;
}

.recipe-plate-component__horizontalRatio {
    aspect-ratio: 16/9;
}
.time-plate-component__host {
    display: flex;
    align-items: center;
    padding: 0.325rem 0.5rem;
    gap: 0.25rem;
    border-radius: 3rem;
    background-color: var(--island-bg-color);
    box-shadow: var(--default-box-shadow)
}

.time-plate-component__clockIcon {
    width: 1rem;
    height: 1rem;
    background-color: var(--main-grey-color);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.time-plate-component__timeValue {
    font: var(--additional-text-font);
    color: var(--main-grey-color);
}
.portions-component__portions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background-color: var(--island-bg-color);
    box-shadow: var(--default-box-shadow)
}

.portions-component__icon {
    width: 1.25rem;
    height: 1.25rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--main-grey-color);
}

.portions-component__text {
    font: var(--default-bold-text-font);
    font-size: 0.75rem;
    color: var(--main-grey-color);
}
.animated-fav-recipe-switch-component__plate {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-shadow: var(--default-box-shadow);
    background-color: var(--island-bg-color);
    position: relative;
    overflow: hidden;

    &:hover {
        cursor: pointer;
    }
}

.animated-fav-recipe-switch-component__starIcon, .animated-fav-recipe-switch-component__filledStarIcon {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    height: 70%;
    width: 70%;
    background-color: var(--main-color);
    mask-repeat: no-repeat;
    mask-size: cover;
}
.add-btn-component__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;

    &:hover {
        cursor: pointer;
    }
}

.add-btn-component__text {
    font: var(--additional-text-font);
    color: var(--secondary-color);
}

.add-btn-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-image: cover;
}
.pagination-feed-component__host {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.pagination-feed-component__feed {
    display: grid;
    grid-auto-rows: min-content;
    gap: 0.5rem;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

.pagination-feed-component__columns2 {
    grid-template-columns: 1fr 1fr;
}

.pagination-feed-component__columns3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    
}

.pagination-feed-component__columnsauto {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
.loader-spinner-component__host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-spinner-component__loader {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: relative;
    animation: loader-spinner-component__rotate 1s linear infinite
}

.loader-spinner-component__loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 3px solid var(--main-color);
    animation: loader-spinner-component__prixClipFix 2s linear infinite;
}

@keyframes loader-spinner-component__rotate {
    100%   {transform: rotate(360deg)}
}

@keyframes loader-spinner-component__prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
.tag-component__tag {
    padding: 0.25rem 0.75rem;
    border-radius: 3rem;
    white-space: nowrap;
}

.tag-component__selectable {
    background-color: var(--third-priority-color);
    border: 2px solid var(--third-priority-color);
    color: var(--secondary-color);

    &:hover {
        cursor: pointer;
    }
}

.tag-component__readonly {
    background-color: var(--low-priority-grey-color);
    color: var(--text-on-main-color);
}

.tag-component__selected {
    border-color: var(--main-color);
}
.tags-component__tagsList {
    display: flex;
    gap: 0.25rem;
    list-style-type: none;
    overflow: auto;
    scrollbar-width: none;
}
.nutrition-facts-component__nutritionFacts {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 3rem;
}

.nutrition-facts-component__nutritionFact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--main-grey-color);
    font: var(--default-bold-text-font);
}

.nutrition-facts-component__nutritionFactTitle, .nutrition-facts-component__nutritionFactValue {
    text-align: center;
}
.recipe-advice-component__advice {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-advice-component__adviceHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-advice-component__adviceIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-advice-component__adviceTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-advice-component__adviceParagraph {
    color: var(--secondary-grey-color);
}
.recipe-ingredients-component__ingredients {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-ingredients-component__ingredientsHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-ingredients-component__ingredientsIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-ingredients-component__ingredientsTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-ingredients-component__ingredientsList {
    list-style-position: inside;
    margin-left: 0.75rem;
}

.recipe-ingredients-component__ingredientsListItem {
    color: var(--secondary-grey-color);
}
.recipe-serving-component__serving {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-serving-component__servingHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-serving-component__servingIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-serving-component__servingTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-serving-component__servingParagraph {
    color: var(--secondary-grey-color);
}
.recipe-step-component__step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-step-component__stepHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-step-component__stepIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-step-component__stepTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-step-component__stepDesc {
    color: var(--secondary-grey-color);
}
.selector-component__selector {
    outline: none;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    color: var(--secondary-color);
    border-color: transparent;
    background-color: var(--third-priority-color);
    cursor: pointer;
    font: var(--default-regular-text-font);
}
.recipe-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.recipe-component__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.recipe-component__steps {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.planner-cards-component__host {
    display: flex;
    gap: var(--safe-zone-one-side-padding);
    overflow-x: auto;
    scrollbar-width: none;

    & > * {
        flex-shrink: 0;
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-cards-component__host {
        scrollbar-width: thin;
    }
}
.planner-card-component__host {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 300px;
    background-color: var(--secondary-grey-color);
    padding: calc(2 * var(--safe-zone-one-side-padding));
    position: relative;
    overflow: hidden;
    border-radius: var(--island-border-radius);
    border: 3px solid transparent;
}

.planner-card-component__dateTitle {
    display: block;
    font: var(--heading2-font);
    color: var(--text-on-main-color);
    text-align: center;
    pointer-events: none;
}

.planner-card-component__meals {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    pointer-events: none;
}

.planner-card-component__dayName {
    position: absolute;
    right: -0.5rem;
    bottom: -2rem;
    font-size: 12rem;
    font-weight: 900;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1;
    color: rgb(255, 255, 255, 0.2);
    text-transform: uppercase;
    pointer-events: none;
}
.planner-card-meal-component__host {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planner-card-meal-component__mealName {
    font: var(--heading3-font);
    color: var(--text-on-main-color);
}

.planner-card-meal-component__mealList {
    display: flex;
    gap: 1rem;   
    flex-wrap: wrap;
    list-style-type: none;
}

.planner-card-meal-component__dishName {
    font: var(--additional-text-font);
    color: var(--text-on-main-color);
}

.planner-card-meal-component__lineThrough {
    text-decoration: line-through;
}
.recipes-component__host {
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.recipes-component__recipeFeed {
    margin-bottom: var(--nav-panel-mobile-height);

    /* min-height: 0 tells browsers that this element can be smaller than content inside it */
    min-height: 0;
    flex-grow: 1;
}

.recipes-component__header {
    transition: opacity 0.1s ease-in;
    opacity: 1;

    @starting-style {
        opacity: 0
    }
}

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

/* DESKTOP */
@media (min-width: 960px) {
    .recipes-component__recipeFeed {
        margin-bottom: unset;
    }
}
.search-bar-component__host {
    display: flex;
    width: 100%;
    padding: 0 1rem;
    align-items: center;
    border: 1px solid var(--main-grey-color);
    border-radius: 2rem;
}

.search-bar-component__loupeIcon {
    width: 2rem;
    height: 2rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--main-grey-color);
}

.search-bar-component__textInput {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 1rem;
    background-color: transparent;
}
.recipes-header-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.planner-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.planner-component__body {
    margin-bottom: calc(var(--nav-panel-mobile-height) + 1rem);
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.planner-component__selectDayPlaceholder, .planner-component__plannerDay {
    height: 100%;
    width: 100%;
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-component__host {
        --placeholder-icon-one-side-size: 8rem;
        --placeholder-font-size: 2rem;
    }

    .planner-component__body {
        margin-bottom: unset;
    }
}
.weekday-picker-component__host {
    display: flex;
}

.weekday-picker-component__weekdays {
    display: flex;
    justify-content: space-between;
}
.edit-btn-component__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;

    &:hover {
        cursor: pointer;
    }
}

.edit-btn-component__btnName {
    font: var(--additional-text-font);
    color: var(--secondary-color);
}

.edit-btn-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-image: cover;
}
.photo-preview-component__host {
    display: flex;
    position: relative;
}

.photo-preview-component__photo {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.photo-preview-component__darkOverlay {
    filter: brightness(50%);
}

.photo-preview-component__signature {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 2rem;
    color: #fff;
    font: var(--default-regular-text-font);
}
.weekday-picker-day-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    position: relative;
    z-index: 1;

    &:hover {
        cursor: pointer;
    }
}

.weekday-picker-day-component__emptyMarker {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--main-color);
    display: none;
}

.weekday-picker-day-component__visible {
    display: block;
}

.weekday-picker-day-component__monthDate {
    font: var(--additional-text-font);
    font-size: 1.5rem;
    color: var(--main-grey-color);
}

.weekday-picker-day-component__dayAbbreviation {
    font: var(--additional-text-font);
    font-size: 0.875rem;
    color: var(--main-grey-color);
}

.weekday-picker-day-component__active {
    .weekday-picker-day-component__monthDate {
        color: var(--text-on-main-color);
    }

    .weekday-picker-day-component__dayAbbreviation {
        color: var(--text-on-main-color);
    }

    &::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        background-color: var(--main-color);
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        transition: scale 0.1s ease-in;

        @starting-style {
            scale: 0.5;
        }
    }
}
.select-day-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.select-day-placeholder-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.select-day-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    width: min-content;
    text-align: center;
}
.planner-day-component__host {
    display: flex;
}

.planner-day-component__plannerDayManager, .planner-day-component__plannerDayManualEditor {
    width: 100%;
    height: 100%;
}
.planner-day-copy-editor-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.planner-day-copy-editor-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.planner-day-copy-editor-overlay-component__dayPicker {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.planner-day-copy-editor-overlay-component__desc {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.planner-day-copy-editor-overlay-component__plannerCardCont {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.planner-day-copy-editor-overlay-component__plannerCards {
    flex-grow: 1;
    min-width: 0;
}

.planner-day-copy-editor-overlay-component__selectedCard {
    border-color: var(--main-color);
}

.planner-day-copy-editor-overlay-component__copyBtn {
    margin-left: auto;
}

@media (min-width: 960px) {
    .planner-day-copy-editor-overlay-component__content {
        width: clamp(1200px, 70vw, 1600px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.planner-day-manager-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.planner-day-manager-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.planner-day-manager-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    width: min-content;
    text-align: center;
    margin-bottom: 1rem;
}

.planner-day-manager-component__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--low-priority-grey-color);
    font: var(--default-bold-text-font);
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-day-manager-component__btns {
        flex-direction: row;
        gap: 1rem;
    }
}
.select-dish-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.select-dish-placeholder-component__icon {
    width: 3rem;
    height: 3rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.select-dish-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    width: min-content;
    text-align: center;
    margin-bottom: 1rem;
}
.dish-slider-component__slider {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.dish-slider-component__dish {
    cursor: pointer;
    width: 200px;
    height: 150px;
}

.dish-slider-component__selectDishPlaceholder {
    justify-self: center;
}
.meal-component__mealCont {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.meal-component__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.meal-component__heading {
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
}
.dish-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.dish-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.dish-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dish-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.dish-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .dish-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.meal-edit-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.meal-edit-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.meal-edit-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meal-edit-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.meal-edit-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.meal-edit-overlay-component__mealEdit {
    transition: opacity 0.1s ease-in-out;

    @starting-style {
        opacity: 0
    }
}

.meal-edit-overlay-component__dishSearcher {
    min-height: 0;
}

.meal-edit-overlay-component__hidden {
    display: none !important;
}

@media (min-width: 960px) {
    .meal-edit-overlay-component__content {
        width: clamp(1200px, 70vw, 1600px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}

.planner-day-manual-editor-component__meals {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.two-mode-switch-component__host {
    display: flex;
}

.two-mode-switch-component__option {
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 2rem;

    &:hover {
        cursor: pointer;
    }
}

.two-mode-switch-component__active {
    background-color: var(--main-color);
    color: var(--text-on-main-color);
}
.planner-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planner-header-component__heading {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-header-component__weekdayPicker {
        width: 600px;
    }
}
.planner-body-component__host {
    display: flex;
    gap: var(--safe-zone-one-side-padding);
    flex-direction: column;
}

.planner-body-component__selectDayPlaceholder, .planner-body-component__plannerDay, .planner-body-component__cookingDay {
    height: 100%;
    width: 100%;
}

.cooking-day-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.cooking-day-component__placeholder {
    height: 100%;
}
.cooking-dish-card-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.cooking-dish-card-component__ingredientsTitle {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.cooking-dish-card-component__readyBtn {
    margin-left: auto;
}

/* DESKTOP */
@media (min-width: 960px) {
    .cooking-dish-card-component__host {
        width: 600px;
    }
}
.confirm-cancel-modal-component__host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-cancel-modal-component__content {
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem;
}

.confirm-cancel-modal-component__desc {
    font: var(--default-regular-text-font);
    text-align: center;
}

.confirm-cancel-modal-component__btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* DESKTOP */
@media (min-width: 960px) {
    content {
        max-width: 400px;
    }
}
.empty-cooking-day-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-cooking-day-placeholder-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.empty-cooking-day-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    width: min-content;
    text-align: center;
}
.dish-deduction-component__island {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dish-deduction-component__paragraph {
    color: var(--secondary-grey-color);
}
.save-btn-component__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;

    &:hover {
        cursor: pointer;
    }
}

.save-btn-component__btnName {
    font: var(--additional-text-font);
    color: var(--secondary-color);
}

.save-btn-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-image: cover;
}
.close-btn-component__host {
    display: inline-block;
}

.close-btn-component__btn {
    outline: none;
    background-color: var(--third-priority-color);
    border-radius: 50%;
    border: none;
    padding: 0.5rem;
}

.close-btn-component__icon {
    width: 1rem;
    height: 1rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-color);
}
.amount-control-component__cont {
    display: flex;
    gap: 0.5rem;
}

.amount-control-component__btn {
    outline: none;
    background-color: var(--third-priority-color);
    border-radius: 50%;
    border: none;
    padding: 0.5rem;

    &:hover {
        cursor: pointer;
    }
}

.amount-control-component__icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.amount-control-component__input {
    width: 90px;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    padding: 0 0.25rem;
    text-align: center;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    font: var(--default-regular-text-font);

    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}
.editable-dish-component__host {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editable-dish-component__dishPhoto {
    border-radius: var(--island-border-radius);
    overflow: hidden;
    min-height: 0;
    flex-grow: 1;
}

.editable-dish-component__closeBtn {
    position: absolute;
    top: 4px;
    right: 4px;
}

.editable-dish-component__amountControl {
    align-self: center;
}
.edit-dish-slider-component__host {
    display: flex;
}

.edit-dish-slider-component__dishes {
    height: 100%;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

 /* DESKTOP */
@media (min-width: 960px) {
    .edit-dish-slider-component__dish {
        width: 200px;
        height: 100%;
    }
}
.drag-n-drop-placeholder-component__placeholder {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.drag-n-drop-placeholder-component__icon {
    width: 4rem;
    height: 4rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--main-grey-color);
}

.drag-n-drop-placeholder-component__text {
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}
.dish-searcher-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.dish-searcher-component__header {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);

    transition: opacity 0.1s ease-in;
    opacity: 1;

    @starting-style {
        opacity: 0
    }
}

.dish-searcher-component__recipeFeed {
    min-height: 0;
}

.dish-searcher-component__hidden {
    display: none !important;
}

/* DESKTOP */
/* @media (min-width: 960px) {
    .recipesFeed {
        margin-bottom: unset;
    }
} */
.meal-edit-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.meal-edit-component__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.meal-edit-component__heading {
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
}

.meal-edit-component__zone {
    height: 200px;

    border: 1px dashed var(--secondary-color);
    border-radius: var(--island-border-radius);

    display: flex;
    justify-content: center;
    align-items: center;
}

.meal-edit-component__sliderComp {
    width: 100%;
    height: 80%;
    
    & > *:first-child {
        padding-left: 0.75rem;
    }

    & > *:last-child {
        padding-right: 0.75rem;
    }
}
.planner-day-copy-editor-header-component__host {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.planner-day-copy-editor-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.planner-day-copy-editor-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.planner-day-copy-editor-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.ingredient-list-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ingredient-list-item-component__host {
    display: flex;
}

.ingredient-list-item-component__ingredientInfo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ingredient-list-item-component__ingredientName {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.ingredient-list-item-component__ingredientTitle {
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
}

.ingredient-list-item-component__ingredientDetails {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ingredient-list-item-component__amountControl {
    margin-left: auto;
}
.target-amount-component__host {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.target-amount-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.target-amount-component__text {
    font: var(--default-regular-text-font);
    color: var(--low-priority-grey-color);
}
.storage-amount-component__host {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.storage-amount-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.storage-amount-component__text {
    font: var(--default-regular-text-font);
    color: var(--low-priority-grey-color);
}
.ingredient-price-per-unit-component__cont {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.ingredient-price-per-unit-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.ingredient-price-per-unit-component__plate {
    font: var(--default-regular-text-font);
    color: var(--secondary-color);
    background-color: var(--third-priority-color);
    border-radius: 0.5rem;
    padding: 0.125rem 0.75rem
}
.tooltip-component__host {
    display: flex;
    position: relative;

    --desc-width: 200px;
}

.tooltip-component__trigger {
    height: 1.25rem;
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    border-radius: 50%;

    &:hover {
        cursor: pointer;
    }
}

.tooltip-component__desc {
    position: absolute;
    width: var(--desc-width);
    background-color: var(--third-priority-color);
    color: var(--main-grey-color);
    padding: 1rem;
    border-radius: var(--island-border-radius);
    box-shadow: var(--default-box-shadow);
}

.tooltip-component__leftAligned {
    left: 0;
    bottom: 2rem;
}

.tooltip-component__rightAligned {
    right: 0;
    bottom: 2rem;
}

.tooltip-component__centerAligned {
    left: 0;
    translate: -100px 0;
    bottom: 2rem;
}
.cart-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height) + 0.5rem);
    overflow-y: auto;
    scrollbar-width: none;
}

.cart-component__emptyCartPlaceholder {
    height: 100%;
}

.cart-component__purchaseBtn {
    margin-left: auto;
}

/* DESKTOP */
@media (min-width: 960px) {
    .cart-component__host {
        padding-bottom: unset;
    }
}
.ingredient-selector-modal-component__host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-selector-modal-component__content {
    background-color: var(--island-bg-color);
    padding: 1.5rem 1rem;
    border-radius: var(--island-border-radius);
    height: 50vh;
    width: clamp(0px, 90%, 1000px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ingredient-selector-modal-component__ingredientList {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ingredient-selector-modal-component__ingredient {
    padding: 1rem 0.5rem;
    border-radius: 0.5rem;

    &:hover {
        cursor: pointer;
        background-color: var(--third-priority-color);
    }
}

.ingredient-selector-modal-component__nothingFoundPlaceholder {
    height: 100%;
}
.cart-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-header-component__heading {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cart-header-component__title {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.cart-header-component__printVersionLink {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    cursor: pointer;
}

.cart-header-component__printVersionText {
    font: var(--default-regular-text-font);
    color: var(--secondary-color);
    text-decoration: underline;
}

.cart-header-component__printIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}
.cart-categories-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.accordion-component__host {
    display: flex;
    flex-direction: column;
}

.accordion-component__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
        cursor: pointer;
    }
}

.accordion-component__heading {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.accordion-component__arrowIcon {
    width: 1rem;
    height: 1rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
    rotate: -90deg;
    transition: rotate 0.1s ease-in-out;
}

.accordion-component__content {
    transition: opacity 0.1s ease-in;
    opacity: 1;
    margin-top: 1rem;

    @starting-style {
        opacity: 0;
    }
}

.accordion-component__open {
    rotate: 90deg;
}

.accordion-component__hidden {
    display: none;
}
.empty-cart-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.empty-cart-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-cart-placeholder-component__text {
        width: 400px;
    }
}
.storage-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height) + 0.5rem);
    overflow-y: auto;
    scrollbar-width: none;
}

.storage-component__emptyStoragePlaceholder {
    height: 100%;
}

.storage-component__categories {
    flex-grow: 1;
}

/* DESKTOP */
@media (min-width: 960px) {
    .storage-component__host {
        padding-bottom: unset;
    }
}
.storage-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.storage-header-component__title {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.storage-header-component__heading {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.storage-categories-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.storage-categories-component__emptyCategoriesPlaceholder {
    flex-grow: 1;
}

.empty-storage-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.empty-storage-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-storage-placeholder-component__text {
        width: 400px;
    }
}
.prices-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height));
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.prices-component__categories {
    flex-grow: 1;
}

/* DESKTOP */
@media (min-width: 960px) {
    .prices-component__host {
        padding-bottom: unset;
    }
}
.price-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.price-header-component__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    font: var(--heading2-font);
    color: var(--main-grey-color);
}
.new-price-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.new-price-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

@media (min-width: 960px) {
    .new-price-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.new-price-overlay-header-component__host {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.new-price-overlay-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.new-price-overlay-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.new-price-overlay-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.price-list-categories-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.price-list-categories-component__emptyCategoriesPlaceholder {
    flex-grow: 1;
}
.new-price-form-component__host {
    display: flex;
}

.new-price-form-component__form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.new-price-form-component__formControls {
    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);

    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.new-price-form-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.new-price-form-component__btns {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.text-input-component__host {
    display: flex;
}

.text-input-component__input {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    font: var(--default-regular-text-font);
}
.profile-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: var(--nav-panel-mobile-height);
}

.profile-component__footer {
    align-self: center;
}

@media (min-width: 960px) {
    .profile-component__host {
        width: clamp(600px, 40vw, 1000px);
    }
}
.profile-info-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.profile-info-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.profile-info-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.profile-info-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.profile-info-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .profile-info-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.profile-credentials-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.profile-credentials-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.profile-credentials-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.profile-credentials-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.profile-credentials-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .profile-credentials-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.profile-header-component__host {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.profile-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.profile-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.photo-upload-component__host {
    display: flex;
}

.photo-upload-component__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;
}

.photo-upload-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.photo-upload-component__uploadText {
    font: var(--default-regular-text-font);
    color: var(--secondary-color);
}

.photo-upload-component__input {
    display: none;
}
.profile-photo-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--safe-zone-one-side-padding);
}

.profile-photo-component__photo {
    width: 40vw;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
}

@media (min-width: 960px) {
    .profile-photo-component__photo {
        width: 300px;
    }
}
.profile-info-form-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-info-form-component__form {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-info-form-component__formControls {
    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);

    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-info-form-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.profile-info-form-component__btns {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
.profile-credentials-form-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-credentials-form-component__form {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-credentials-form-component__formControls {
    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);

    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-credentials-form-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.profile-credentials-form-component__btns {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}