@layer components {
    .dishes {
        & > :not(:last-child) {
            border-bottom: 1px solid var(--color-darker);
        }

        overflow: hidden;
        margin-top: var(--block-space);
    }

    .dish {
        width: 100%;
        padding: var(--inline-space) var(--block-space);
        display: flex;
        gap: 0.5ch;

        > .dish__name {
            font-weight: 700;
        }

        > .dish__description {
            color: var(--color-base-200);
        }

        &:hover {
            background: var(--color-canvas);
        }
    }

    .dish__link {
        display: block;
    }

    .no-dish {
        margin-top: var(--block-space-double);
        display: grid;
        gap: var(--block-space-half);
        justify-items: center;
        text-align: center;

        > .no-dish__subtitle {
            color: var(--color-base-200)
        }
    }
}