@import 'content';

main {
    .content-panel,
    .comment {
        .author-info {
            transition: background-color $transitionTime ease-in-out;

            &:hover {
                background-color: $logoLight;
            }
            &:active {
                background-color: $footerColor;
            }
        }
    }

    .image-panel {
        display: inline-block;

        position: relative;

        width: calc(50% + 4.8rem);
        padding-top: calc(56.25% * 0.54); // Force 16:9 Aspect Ratio

        overflow: hidden;

        img,
        p {
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            padding: 0;
            margin: 0;
        }
        img {
            width: 100%;
            // max-height: 100.6%;
            // max-width: 100.6%;

            object-fit: contain;
        }

        .image-caption {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);

            width: calc(100% - 2rem);
            min-height: 4rem;
            border-radius: $panelCorner;
            color: $panelColor;

            background-color: $overlayColor;
        }

    }

    #comment-container,
    .reply-container {

        .comment {
            padding: 1.4rem;
            margin: 1rem 0;

            width: calc(100% - 2.8rem);

            border-radius: $panelCorner;

            overflow: hidden;
            // @include hasShadow();

            &.edit-active {
                .overlay {
                    opacity: 0 !important;
                    pointer-events: none;
                }
            }

            > p {
                width: 90%;
            }
            form {
                margin: 0;
                margin-left: 2.5%;
                padding: 0;

                width: 95%;

                input[type="text"] {
                    margin: 0;
                    margin-bottom: 0.32rem;
                    width: 100%;
                    background-color: $logoLight;
                    box-shadow: none;

                    transition: background-color $transitionTime ease-in-out;

                    &:hover {
                        background-color: $footerColor;
                    }
                }
                p {
                    align-self: flex-end;
                    margin: 0;
                    margin-bottom: 0.6rem;

                    cursor: pointer;

                    transition: transform $transitionTime ease-in-out;

                    &:hover {
                        transform: scale(1.12);
                    }
                    &:active {
                        transform: scale(0.96);
                    }
                }
            }

            .overlay {
                @include flexDisplay(row, center, center);

                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                height: 54%;
                width: 20%;

                background-color: $overlayColor;
                border-radius: $panelCorner;
                opacity: 0;

                transition: opacity $transitionTime ease-in-out;

                .menu-item {
                    position: relative;

                    @include flexDisplay(column, center, center);

                    margin: 0 0.8rem;

                    height: 3.6rem;
                    width: 3.6rem;
                    border-radius: 50%;
                    background-color: rgba(255,255,255, 0.32);

                    transition: transform $transitionTime ease-in-out,
                        background-color $transitionTime ease-in-out,
                        stroke $transitionTime ease-in-out,
                        fill $transitionTime ease-in-out;

                    cursor: pointer;
                    user-select: none;

                    svg {
                        height: 56%;
                        width: 56%;

                        fill: $inputColor;
                        stroke: $inputColor;
                    }

                    &:hover {
                        transform: scale(1.12);
                    }
                    &:active {
                        transform: scale(0.96);
                    }
                }
            }

            &:hover {
                .overlay {
                    opacity: 1;
                }
            }
            &:active {
                .overlay {
                    opacity: 1;
                }
            }

        }

        > p {
            text-align: center;
            padding: 1.4rem;

            background-color: $panelAccent;
            border-radius: $panelCorner;
        }
    }

    > form,
    #comment-container {
        width: 52%;
    }
    form {
        margin: 3rem 0;
    }
    #comment-container {
        @include flexDisplay(column, flex-start, flex-end);

        padding: 2rem;
        border-radius: $panelCorner;

        .comment {
            background-color: $panelColor;
        }

        > h3 {
            margin: 0;
            margin-left: 1.4rem;
            margin-bottom: -0.6rem;
        }

        > p {
            margin: 0;
            margin-top: 1rem;
            margin-bottom: -1rem;

            width: calc(100% - 2.8rem);
        }

    }
    .reply-container {
        position: relative;

        margin-left: 10%;
        width: 90%;
        min-height: 9rem;

        .comment {
            background-color: $panelAccent;
        }

        svg.loading-graphic {
            position: absolute;
            left: 40%;
        }

        > p {
            margin: 2rem;
        }

    }

    .reply-button {
        position: relative;

        height: 3rem;
        width: 8rem;

        margin-top: -0.8rem;
        margin-bottom: 0.8rem;

        transition: transform $transitionTime ease-in-out;

        cursor: pointer;
        user-select: none;

        svg,
        h3 {
            position: absolute;
        }

        svg,
        h3 {
            top: 50%;
            left: 50%;
        }

        svg {
            transform: translate(-160%, -50%);

            height: 2.4rem;
            width: 2.4rem;
        }
        h3 {
            transform: translate(-39%, -6%);
            white-space: nowrap;
        }

        &:hover {
            transform: scale(1.04);
        }
        &:active {
            transform: scale(1);
        }

    }

}

// Maximum aspect ratio - mobile/portrait browsers
@media (max-aspect-ratio: 12/10) {

    main {
        .image-panel {
            width: 92% !important;
            padding-top: 56.25% !important; // Force 16:9 Aspect Ratio
        }

        > form,
        #comment-container {
            width: 92%;
        }
    }



}

