@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;
}

$inner-panel-height-ratio: 0.95;

.conversations-view {
    $height: 100vh;
    $width: 100vw;
    $conversations-panel-height: calc($height * $inner-panel-height-ratio);
    $conversations-panel-width: calc($conversations-panel-height * $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: $aspect-ratio) {
                    width: 100%;
                }
                @media (min-aspect-ratio: $aspect-ratio) {
                    aspect-ratio: $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: $aspect-ratio;
        }

        &__conversations {
            height: $content-height;
            min-width: 64px;

            flex-grow: 1;

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

            &__tabs-bar {
                height: 5%;
                width: 100%;

                flex-grow: 0;
            }

            &__panels {
                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;
                }
            }
        }
    }
}

.tabs-bar {
    $gap: min(1vw, 8px);

    height: 100%;
    width: 100%;

    display: flex;
    gap: $gap;
    overflow: scroll;

    scrollbar-width: none;

    white-space: nowrap;
}

.tab {
    $gap: min(1vw, 8px);

    height: 100%;
    min-width: 0px;
    max-width: 100%;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: $gap;

    border: $border-normal;
    border-color: get-color(primary, 90);
    border-radius: $border-radius;

    padding: calc($gap / 2) $gap;

    font-size: 2vh;

    background-color: get-color(greyscale, 0);

    &__avatar-image {
        height: 100%;
        aspect-ratio: 1;

        border: $border-thin;
        border-color: get-color(greyscale, 90);
        border-radius: $border-radius;

        background-size: cover;
    }

    &__name {
        display: inline-block;
        margin: 0px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        cursor: default3;
    }
}