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

@import (reference) 'common/screen-sizes.less';

.discover-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    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 26rem;
        grid-template-rows: fit-content(15rem) 1fr;
        grid-template-areas:
            "pickers-area meta-preview-area"
            "meta-items-area meta-preview-area";

        .pickers-container {
            grid-area: pickers-area;
            display: grid;
            grid-gap: 1rem;
            margin: 2rem 0;
            padding: 0 2rem;
            overflow-y: auto;

            .picker {
                height: 3rem;
            }
        }

        .meta-items-container {
            grid-area: meta-items-area;
            display: grid;
            grid-auto-rows: max-content;
            grid-gap: 1.5rem;
            align-items: center;
            padding: 0 2rem;
            overflow-y: auto;

            .meta-item {
                &.selected {
                    outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
                    outline-offset: calc(-1.5 * var(--focus-outline-size));
                }
            }
        }

        .meta-preview-container {
            grid-area: meta-preview-area;
            background-color: var(--color-backgrounddarker);
        }
    }
}

@media only screen and (min-width: @xxlarge) {
    .discover-container {
        .discover-content {
            .pickers-container {
                grid-template-columns: repeat(auto-fill, 17rem);
            }

            .meta-items-container {
                grid-template-columns: repeat(8, auto);
            }
        }
    }
}

@media only screen and (max-width: @xxlarge) {
    .discover-container {
        .discover-content {
            .pickers-container {
                grid-template-columns: repeat(6, 1fr);
            }

            .meta-items-container {
                grid-template-columns: repeat(7, auto);
            }
        }
    }
}

@media only screen and (max-width: @normal) {
    .discover-container {
        .discover-content {
            .pickers-container {
                grid-template-columns: repeat(5, 1fr);
            }

            .meta-items-container {
                grid-template-columns: repeat(6, auto);
            }
        }
    }
}

@media only screen and (max-width: @medium) {
    .discover-container {
        .discover-content {
            .pickers-container {
                grid-template-columns: repeat(4, 1fr);
            }

            .meta-items-container {
                grid-template-columns: repeat(5, auto);
            }
        }
    }
}

@media only screen and (max-width: @small) {
    .discover-container {
        .discover-content {
            .pickers-container {
                grid-template-columns: repeat(3, 1fr);
            }

            .meta-items-container {
                grid-template-columns: repeat(4, auto);
            }
        }
    }
}

@media only screen and (max-width: @xsmall) {
    .discover-container {
        .discover-content {
            grid-template-columns: 1fr;
            grid-template-rows: fit-content(19rem) 1fr;
            grid-template-areas:
                "pickers-area"
                "meta-items-area";

            .pickers-container {
                grid-template-columns: repeat(4, 1fr);
            }

            .meta-items-container {
                grid-template-columns: repeat(5, auto);
            }

            .meta-preview-container {
                display: none;
            }
        }
    }
}


@media only screen and (max-width: @minimum) {
    .discover-container {
        .discover-content {
            .pickers-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }
}