.image
{
    a
    {
        display: flex;
    }

    img
    {
        width: 100%;
    }
}

.icon
{
    background: #EB0 no-repeat center/16px;
    border-radius: 5px;
    height: 26px;
    width: 26px;

    &.disable
    {
        opacity: 0.1;
        pointer-events: none;
    }

    &.friend
    {
        background-color: #CCC;
    }

    &.liked
    {
        background-image: url('liked.png');
    }

    &.rating
    {
        color: #000;                    
        font-weight: bold;
        padding: 5px;
        text-align: center;
    }

    &.played, &.watched
    {
        background-image: url('watched.png');
    }

    &.playlist, &.watchlist
    {
        background-image: url('saved.png');
    }
}

.pagination .content
{
    display: flex;
    gap: 5px;
    margin-bottom: 10px;

    button
    {
        background-color: #444;
        background-color: #EB0;
        border: none;
        border-radius: 5px;
        color: #222;
        cursor: pointer;
        font-weight: bold;
        padding: 10px;
        user-select: none;

        &:disabled
        {
            cursor: none;
            opacity: 0.6;
            pointer-events: none;
        }

        &:hover
        {
            background-color: #FD0;
        }
    }
}

#achievements, #friends, #game, #gamelist, #games, #login, #movies, #movie, #movielist, #userlist
{
    margin: auto;
    padding: var(--padding-side);
    width: var(--layout-width);
}

#home
{
    .swiper
    {
        height: 100%;
        width: 100%;
    }

    .swiper-slide
    {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 240px;
    }

    .swiper-slide img
    {
        display: block;
        height: 320px;
        object-fit: cover;
    }
}

#home_loggedin
{
    margin: auto;
    padding: var(--padding-side);
    width: var(--layout-width);

    .games, .movies
    {
        background-color: #234;
        border-radius: 5px;
        gap: 10px;
        margin: 10px 0;
        padding: 10px;

        .label
        {
            font-family: 'Segoe UI', sans-serif;
            font-weight: bold;
        }

        .container
        {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(var(--columns), 1fr);

            .item
            {
                .title
                {
                    
                    font-size: 12px;
                }
            }
        }
    }
}

#game, #movie
{
    .grid
    {
        display: grid;
        grid-template-columns: 1fr;

        .image
        {
            max-width: 512px;
        }

        .title, .title_br
        {
            font-size: 18px;
        }

        .listing
        {
            background-color: #444;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 10px;
        }

        .services .container
        {
            display: flex;
            gap: 5px;

            a
            {
                display: flex;

                img
                {
                    height: 42px;
                    width: 42px;
                }
            }
        }

        .add
        {
            display: flex;

            a
            {
                align-items: center;
                background-color: #3A5;
                border-radius: 5px;
                display: flex;
                font-weight: bold;
                gap: 5px;
                padding: 5px;

                &:hover
                {
                    background-color: #394;
                    color: inherit;
                }
            }
        }
    }

    .label
    {
        font-weight: bold;
    }    

    .toggle .icon
    {
        align-items: center;
        background: #999 no-repeat center/32px;
        border: none;
        border-radius: 5px;
        height: 42px;
        width: 42px;

        &.selected
        {
            background: #DDD no-repeat center/32px;
        }

        &.like
        {
            background-image: url('like_empty.png');

            &.selected
            {
                background-image: url('like_full.png');
            }
        }

        &.played, &.watched
        {
            background-image: url('watched_empty.png');

            &.selected
            {
                background-image: url('watched_full.png');
            }
        }

        &.playlist, &.watchlist
        {
            background-image: url('saved_empty.png');

            &.selected
            {
                background-image: url('saved_full.png');
            }
        }

        &:hover
        {
            background-color: #486077;
        }
    }

    .rating .star
    {
        align-items: center;
        background: #999 no-repeat center/28px url('star_empty.png');
        border: none;
        border-radius: 5px;
        height: 32px;
        width: 32px;

        &.starred
        {
            background: #DDD no-repeat center/28px url('star_full.png');
        }

        &:hover
        {
            background-color: #486077;
        }
    }

    textarea
    {
        background-color: #333;
        border: 1px solid #999;
        color: #FFF;
        padding: 10px;
        width: 100%;
    }

    .cast
    {
        margin: 10px 0;

        .container
        {
            background-color: #333;
            display: grid;
            grid-template-columns: repeat(var(--columns), 1fr);
            gap: 10px;
            padding: 10px;

            .item
            {
                .image img
                {
                    border-radius: 5px;

                    &:hover
                    {
                        box-shadow: 0 0 5px 2px #FFF;
                        filter: brightness(115%);
                        filter: contrast(115%);
                    }
                }

                .character
                {
                    color: #999;
                }
            }
        }
    }

    .friends
    {
        margin: 10px 0;

        .container
        {
            background-color: #234;
            display: grid;
            grid-template-columns: repeat(var(--columns), 1fr);
            gap: 10px;
            padding: 10px;

            .image
            {
                img
                {
                    border-radius: 5px;
                }
            }
        }
    }

    .related
    {
        margin-top: 50px;

        .container
        {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(var(--columns), 1fr);

            .item
            {
                img:hover
                {
                    box-shadow: 0 0 8px 2px #FFF;
                    filter: brightness(115%);
                    filter: contrast(115%);
                }

                .title
                {
                    font-size: 12px;
                }
            }
        }
    }
}

#games, #movies
{
    .advice
    {
        background-color: #0066ad;
        font-weight: bold;
        margin-bottom: 10px;
        padding: 10px;
    }

    .container
    {
        display: grid;
        gap: 5px;

        .item
        {
            display: flex;
            gap: 5px;

            .image img
            {
                height: 128px;
                width: 96px;
            }

            .content
            {
                background-color: #333;
                display: flex;
                flex: 1;
                flex-direction: column;
                gap: 5px;
                padding: 5px;

                .label
                {
                    color: #999;
                }

                .title
                {
                    font-weight: bold;
                }

                .developer, .director
                {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                }
            }
        }
    }
}

#gamelist, #movielist
{
    display: flex;
    flex-direction: column;
    gap: 5px;

    .container
    {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(var(--columns), 1fr);

        .item
        {
            background-color: #333;

            .image img
            {
                width: 100%;
            }

            .content
            {
                padding: 5px;
            }

            .title
            {
                font-size: 12px;
            }
        }
    }
}

#userlist
{
    .filter
    {
        margin: auto;
        padding: 5px 0;
        width: var(--layout-width);

        div
        {
            background-color: #333;
            padding: 5px;
        }
    }

    .container
    {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        gap: 10px;

        .title
        {
            font-size: var(--min-font-size);
        }
    }
}

#friends .container
{
    display: flex;
    flex-direction: column;
    gap: 10px;

    .item
    {
        background-color: #234;
        box-shadow: 0 0 5px #000;
        
        .image img
        {
            height: 64px;
            width: 64px;
        }

        .content
        {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 5px;

            .links div
            {
                display: flex;

                a
                {
                    background-color: #345;
                    padding: 5px;

                    &:hover
                    {
                        background-color: #FFF;                        
                        color: #000;
                    }
                }
            }
        }
    }    
}

#achievements
{
    .item
    {
        background-color: #333;
        padding: 5px;

        .title
        {
            font-weight: bold;
        }

        .description
        {
            color: #CCC;
        }
    }

    img
    {
        border-radius: 5px;
        filter: saturate(0);
        height: 64px;
        width: 64px;
    }

    .progress
    {
        background-color: #777;
        border-radius: 5px;

        .progress_bar
        {
            border-radius: 5px;
            height: 20px;
            padding: 2px 5px;
            text-align: center;
        }
    }

    .unlock img
    {
        filter: saturate(1);
    }
}

#best-rated
{
    margin: auto;
    padding: var(--padding-side);
    width: var(--layout-width);

    .container
    {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(var(--columns), 1fr);

        .item
        {
            max-width: 192px;

            img:hover
            {
                box-shadow: 0 0 8px 2px #FFF;
                filter: brightness(115%);
                filter: contrast(115%);
            }

            .title
            {
                font-size: 12px;
            }
        }
    }
}

#login
{
    .advice
    {
        background-color: #0066ad;
        margin-bottom: 10px;
        padding: 20px;

        *
        {
            font-family: 'Segoe UI', sans-serif;
        }

        ul
        {
            display: flex;
            flex-direction: column;
            list-style: none;
            gap: 20px;
            margin: 0;
            padding: 0;

            li
            {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
        }

    }
}

#not_found
{
    text-align: center;

    *
    {
        font-family: 'Segoe UI', sans-serif;
        font-size: 18px;
    }
}

@media (min-width: 1280px)
{
    #best-rated
    {
        .container
        {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    #game, #movie
    {
        .grid
        {
            gap: 10px;
            grid-template-columns: 384px auto;
        }

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

    #games, #movies
    {
        .container
        {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    #userlist
    {
        .container
        {
            grid-template-columns: repeat(8, 1fr);
        }

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