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

.settings-container, :global(.popup-container) {
    --spacing: 16px;
    --side-menu-width: 240px;
    font-size: 14px;
}

.settings-container {
    display: flex;
    width: 100%;
    height: 100%;

    .side-menu {
        padding: var(--spacing);
        width: var(--side-menu-width);
        display: flex;
        flex-direction: column;
        background-color: var(--color-backgroundlighter);

        .setting {
            padding: var(--spacing);
            font-size: 1.1em;
            color: var(--color-surfacelight);
            cursor: pointer;

            &.selected {
                color: var(--color-surfacelighter);
                background-color: var(--color-background);

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

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

    .scroll-container {
        padding: 0 calc(var(--spacing) * 2);
        flex: 1;
        overflow-y: auto;

        .section {
            padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
            width: 500px;
            font-size: 2em;

            .section-header {
                margin-bottom: calc(var(--spacing) * 2);
                color: var(--color-surfacelighter);
            }

            .user-info {
                margin-bottom: var(--spacing);
                display: flex;
                flex-direction: row;
                align-items: center;

                .avatar {
                    margin: 0 var(--spacing);
                    width: calc(var(--side-menu-width) * 0.25);
                    height: calc(var(--side-menu-width) * 0.25);
                    border-radius: 50%;
                    border: 2px solid var(--color-primary);
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }

                .email {
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }
            }

            .select-container {
                display: flex;
                flex-direction: column;
                margin-bottom: calc(var(--spacing) * 1.5);

                .header {
                    margin-bottom: calc(var(--spacing) * 0.5);
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }

                .bar-button {
                    padding: calc(var(--spacing) * 0.5);
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    border: 1px solid var(--color-primary);
                    cursor: pointer;

                    .value {
                        font-size: 14px;
                        color: var(--color-surface);
                    }

                    .icon {
                        width: var(--spacing);
                        height: var(--spacing);
                        fill: var(--color-surface);
                    }

                    &:hover {
                        background-color: var(--color-backgroundlight);

                        .value {
                            color: var(--color-surfacelighter);
                        }

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

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

                        .value {
                            color: var(--color-backgrounddarker);
                        }

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

            .link-container {
                display: flex;
                flex-direction: column;
                margin: var(--spacing) 0;

                .header {
                    margin-bottom: calc(var(--spacing) * 0.5);
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }

                .link {
                    display: block;
                    font-size: 14px;
                    color: var(--color-secondarylight);

                    &:hover {
                        color: var(--color-surfacelight);
                    }
                }
            }

            .button-container {
                display: flex;
                flex-direction: column;
                margin-bottom: calc(var(--spacing) * 1.5);

                .header {
                    margin-bottom: calc(var(--spacing) * 0.5);
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }

                .button {
                    padding: 12px;
                    min-height: 45px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--color-primary);
                    cursor: pointer;

                    .icon {
                        width: 5%;
                        margin-right: calc(var(--spacing) * 0.5);
                        fill: var(--color-surfacelighter);
                    }

                    .label {
                        font-size: 14px;
                        color: var(--color-surfacelighter);
                    }

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

            .checkbox-container {
                display: flex;
                flex-direction: column;
                margin: var(--spacing) 0;
                font-size: 14px;

                .header {
                    margin-bottom: calc(var(--spacing) * 0.5);
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }

                .checkbox {
                    --icon-size: 1.2em;
                    --icon-color: var(--color-surface);
                    --icon-background-color: transparent;

                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    cursor: pointer;

                    .label {
                        margin-left: 0.5em;
                        font-size: 14px;
                        color: var(--color-surfacelight);
                    }

                    &:global(.checked) {
                        --icon-color: var(--color-surfacelight);
                        --icon-background-color: var(--color-primary);
                    }

                    &:focus-within, &:hover {
                        --icon-color: var(--color-surfacelighter);

                        .label {
                            color: var(--color-surfacelighter);
                        }
                    }
                }
            }

            .text-container {
                display: flex;
                flex-direction: column;
                margin-bottom: calc(var(--spacing) * 0.5);

                .header {
                    margin-bottom: calc(var(--spacing) * 0.5);
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }

                .text {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    font-size: 14px;
                    color: var(--color-surfacelighter);

                    .icon {
                        margin-right: calc(var(--spacing) * 0.5);
                        width: var(--spacing);
                        height: var(--spacing);
                        fill: var(--color-signal5);
                    }

                    .x-icon {
                        margin-right: calc(var(--spacing) * 0.5);
                        width: var(--spacing);
                        height: var(--spacing);
                        fill: var(--color-signal2);
                    }
                }
            }

            .color-container {
                display: flex;
                flex-direction: column;
                margin-bottom: calc(var(--spacing) * 1.5);

                .header {
                    margin-bottom: calc(var(--spacing) * 0.5);
                    font-size: 14px;
                    color: var(--color-surfacelighter);
                }

                .color-picker {
                    width: 100%;
                    height: calc(var(--spacing) * 2.5);
                    cursor: pointer;
                }
            }
        }

        >:not(:last-child) {
            border-bottom: 1px solid var(--color-primary);
        }
    }
}

:global(.popup-container) {

    .popup-content {
        width: 436px;
        border: 1px solid var(--color-primary);
        background-color: var(--color-surfacelighter);

        .option {
            padding: calc(var(--spacing) * 0.5);
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: var(--color-backgrounddarker);
            cursor: pointer;

            &.selected {
                color: var(--color-surfacelighter);
                background-color: var(--color-primarydark);
            }

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