stremio-web/src/routes/Discover/styles.less

.discover-container, .menu-layer {
    font-size: 14px;
    --items-per-row: 10;
}

.discover-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);

    .nav-bar {
        flex: none;
        align-self: stretch;
    }

    .discover-content {
        flex: 1;
        align-self: stretch;
        display: grid;
        grid-template-columns: 1fr 24em;
        grid-template-rows: 4.6em 1fr;
        grid-template-areas:
            "picker-area meta-preview-area"
            "meta-items-area meta-preview-area";
        overflow: hidden;

        .pickers-container {
            grid-area: picker-area;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            padding: 0.8em;

            .picker-button {
                flex-grow: 0;
                flex-shrink: 1;
                flex-basis: 16em;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-right: 0.8em;
                padding: 0 0.8em;
                background-color: var(--color-backgroundlighter);
                cursor: pointer;

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

                &:global(.active) {
                    background-color: var(--color-surfacelight);

                    .picker-label {
                        color: var(--color-backgrounddarker);
                    }

                    .picker-icon {
                        fill: var(--color-backgrounddarker);
                    }
                }

                &.types-picker-button {
                    .picker-label {
                        text-transform: capitalize;
                    }
                }

                .picker-label {
                    flex: 1;
                    font-size: 1.1em;
                    line-height: 1.1em;
                    max-height: 2.2em;
                    color: var(--color-surfacelighter);
                    word-break: break-all;
                    word-break: break-word;
                }

                .picker-icon {
                    flex: none;
                    width: 1em;
                    height: 1em;
                    margin-left: 0.8em;
                    fill: var(--color-surfacelighter);
                }
            }
        }

        .meta-items-container {
            grid-area: meta-items-area;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-content: flex-start;
            flex-wrap: wrap;
            padding: 0 0.4em;
            overflow-x: hidden;
            overflow-y: auto;

            &::after {
                width: 100%;
                height: 0.4em;
                display: block;
                content: "";
            }

            .meta-item-container {
                flex-grow: 0;
                flex-shrink: 0;
                flex-basis: calc(100% / var(--items-per-row));
                padding: 0.4em;

                .meta-item {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .meta-preview-container {
            grid-area: meta-preview-area;
            font-size: 1.2em;
        }
    }
}

.menu-layer {
    --border-color: var(--color-backgroundlighter40);
    --box-shadow: -0.6em 0.6em 0.5em -0.1em var(--color-backgrounddark40);

    .menu-items-container {
        width: 16em;
        max-height: 18em;
        overflow-y: auto;
        background-color: var(--color-backgroundlighter);

        &.menu-types-container {
            .menu-item-container {
                .menu-label {
                    text-transform: capitalize;
                }
            }
        }

        .menu-item-container {
            width: 100%;
            padding: 0.8em;
            cursor: pointer;

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

            .menu-label {
                line-height: 1.1em;
                max-height: 2.2em;
                color: var(--color-surfacelighter);
                word-break: break-all;
                word-break: break-word;
            }
        }
    }

}