@import "../_base.scss";
@import "../components/_panel.scss";

.conversations-view-head {
    height: 100%;
    width: 1px;

    flex-shrink: 0;
    scroll-snap-align: end;
}

.conversations-view-tail {
    height: 100%;
    width: 1px;

    flex-shrink: 0;
    scroll-snap-align: start;
}

.conversations-view {
    $height: 100vh;
    $width: 100vw;
    $conversations-panel-height: calc($height * 0.95);
    $conversations-panel-width: calc($conversations-panel-height * $panel-aspect-ratio);
    $gap: 1%;
    $content-height: 95%;
    $ratio: 2;

    height: 100%;
    width: 100%;

    position: relative;
    top: -100vh;
    margin-bottom: -100vh;

    &__small {
        scroll-snap-type: x mandatory;

        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: row;
        gap: $gap;

        justify-content: safe center;
        align-items: safe center;

        overflow-x: scroll;

        &__conversations-panel {
            height: $content-height;
            width: 100%;

            flex-shrink: 0;
            scroll-snap-align: center;

            display: flex;
            align-items: center;
            justify-content: center;

            &__inner {
                height: 100%;

                // TODO: Is aspect-ratio the best criteria to defined that inner shall take all the available space ?
                @media (max-aspect-ratio: $panel-aspect-ratio) {
                    width: 100%;
                }
                @media (min-aspect-ratio: $panel-aspect-ratio) {
                    aspect-ratio: $panel-aspect-ratio;
                }
            }
        }

        &__panel {
            flex-shrink: 0;

            height: $content-height;
            width: 100%;

            display: flex;
            align-items: center;
            justify-content: center;

            scroll-snap-align: center;

            &__inner {
                height: 100%;
                width: calc(100% - (2 * $gap));
            }
        }
    }

    &__big {
        height: 100%;
        width: 100%;
        width: calc(100% - (2 * $gap));

        display: flex;
        flex-direction: row;
        align-items: safe center;
        gap: $gap;

        margin: 0 $gap;

        &__conversations-panel {
            height: $content-height;
            aspect-ratio: $panel-aspect-ratio;
        }

        &__conversation-panels {
            height: $content-height;

            flex-grow: 1;

            display: flex;
            flex-direction: row;
            overflow-x: scroll;

            justify-content: safe center;
            align-items: safe center;
            scroll-snap-type: x mandatory;

            gap: $gap;

            &__panel {
                flex-shrink: 0;

                height: 100%;
                width: 100%;

                scroll-snap-align: center;
            }
        }
    }
}