@import "../../../../css/static/mixin";
@import "../../../../css/static/properties";

.container {
    /* width: 57em; */
    max-width: 57em;
    min-width: 20em;

    flex-shrink: 1;
    flex-grow: 1;

    padding: 1em;

    display: flex;
    flex-direction: column;
    justify-content: stretch;

    @include user-select(none);

    .info {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .logo {
            flex-shrink: 0;
            flex-grow: 0;

            width: 15em;
            height: 15em;

            display: block;

            margin-top: 1em;
            margin-right: 2em;

            align-self: center;

            img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .text {
            display: flex;
            flex-direction: column;
            justify-content: center;

            h1 {
                all: unset;
                display: block;
                font-weight: bold;

                margin-bottom: 0;
                font-size: 1.8em;
            }

            h2 {
                all: unset;
                display: block;
                font-weight: bold;

                font-size: 1.5em;
                margin-bottom: .3em;
            }

            .subtitleShort {
                display: none;
            }

            .subtitleLong {
                display: block;
            }

            p {
                all: unset;
                margin-bottom: 1em;
            }
        }
    }

    .changes {
        display: flex;
        flex-direction: column;
        justify-content: stretch;

        .header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            position: relative;

            margin-top: 1.5em;

            padding-bottom: .5em;
            padding-right: 1em;
            padding-left: 1em;

            &:after {
                content: "";
                display: block;

                height: 2px;

                position: absolute;

                left: 0;
                right: 0;
                bottom: 0;

                @include transition($button_hover_animation_time ease-in-out);
            }

            .left, .right {
                font-size: 1.4em;
                cursor: pointer;

                @include transition($button_hover_animation_time ease-in-out);

                &.hidden {
                    opacity: 0;
                    pointer-events: none;
                }

                &:hover {
                    color: #b6c4d6;
                }
            }

            &.selectedLeft {
                .left {
                    color: #245184;
                }

                &:after {
                    background: linear-gradient(to right, #245184 15em, #999999 60%);
                }
            }

            &.selectedRight {
                .right {
                    color: #245184;
                }

                &:after {
                    background: linear-gradient(to left, #245184 15em, #999999 60%);
                }
            }
        }

        .body {
            margin-top: .5em;
            height: 20em;

            background: #28292b;
            border-radius: 3px;

            position: relative;

            font-family: consolas, monospace;

            .changeList {
                flex-shrink: 1;
                flex-grow: 1;

                display: flex;
                flex-direction: column;
                justify-content: flex-start;

                padding: .4em .8em .8em;

                min-height: 1em;
                height: 20em;

                overflow-x: hidden;
                @include chat-scrollbar-vertical();

                @include user-select(text);

                > ul > li {
                    margin-top: 1em;

                    &:first-child {
                        margin-top: 0;
                    }
                }

                ul {
                    all: unset;
                    display: block;

                    margin-left: 1em;

                    ul {
                        list-style-type: none;

                        li:before {
                            content: '-';
                            margin-left: -1em;
                            margin-right: .5em;
                        }
                    }
                }

                code {
                    background: hsl(0, 0%, 11%);
                    border-radius: 2px;
                    color: hsl(0, 0%, 50%);

                    padding: 0 .25em;
                    margin-left: -.25em;
                    margin-right: -.25em;
                }
            }

            &.hidden {
                display: none;
            }

            .containerBrowse {
                position: absolute;

                color: #245184;

                cursor: pointer;

                top: 0;
                right: .5em;

                padding: 1em .5em .5em;
                border-radius: 3px;

                background-color: #28292bcc;
                @include transition($button_hover_animation_time ease-in-out);

                &:hover {
                    background-color: #28292b;
                    color: #b6c4d6;
                }

                a[href]:visited {
                    color: inherit;
                }
            }
        }
    }
}

@media all and (max-width: 40em) {
    .container .logo {
        display: none !important;
    }

    .container .text {
        .subtitleShort {
            display: block !important;
        }

        .subtitleLong {
            display: none !important;;
        }

        p br {
            display: none;
        }
    }
}