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

.container {
    $animation_length: .25s;

    max-width: 100%;

    margin-top: 0;
    height: 0;

    transition: all $animation_length ease-in-out;
    &.shown {
        margin-top: -4px;
        height: 24px;

        transition: all $animation_length ease-in-out;
    }

    background-color: transparent;

    @include user-select(none);

    position: relative;

    .containerScroll {
        margin-top: 5px;
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;

        display: none;
        flex-direction: row;

        &.shown {
            display: flex;
        }

        .buttonScroll {
            cursor: pointer;

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


            border: 1px solid;
            @include hex-rgba(border-color, #2222223b);

            border-radius: 2px;
            background: #e7e7e7;
            padding-left: 2px;
            padding-right: 2px;

            &:hover {
                background: #eeeeee;
            }

            &.disabled {
                background: #9e9e9e;
                &:hover {
                    background: #9e9e9e;
                }
            }
        }
    }

    &.scrollShown {
        /*
        .connection-handlers {
            width: calc(100% - 45px);
        }
        */

        .handlerList .scrollSpacer {
            display: block;
        }
    }
}

.handlerList {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: left;

    overflow-x: auto;
    overflow-y: visible;

    max-width: 100%;
    scroll-behavior: smooth;

    position: relative;

    .handler {
        padding-top: 4px;
        position: relative;

        flex-grow: 0;
        flex-shrink: 0;

        cursor: pointer;
        display: inline-flex;

        padding-left: 5px;
        padding-right: 5px;

        height: 24px;
        overflow: hidden;

        border-bottom: 1px solid transparent;
        @include transition(all ease-in-out $button_hover_animation_time, opacity ease-in-out 0);

        .icon {
            width: 16px;
            height: 16px;

            align-self: center;
            margin-right: 5px;
        }

        .name {
            color: #a8a8a8;

            align-self: center;
            margin-right: 20px;

            position: relative;

            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
        }

        .buttonClose {
            width: 16px;
            height: 16px;

            position: absolute;
            right: 5px;

            align-self: center;

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

        &.cutoffName {
            .name {
                max-width: 15em;
                margin-right: -5px; /* 5px padding which have to be overcommed */

                &:before {
                    content: '';
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: linear-gradient(to right, transparent calc(100% - 50px), #1e1e1e calc(100% - 25px));
                }
            }
        }

        &:hover {
            background-color: #242425;

            &.cutoffName .name:before {
                background: linear-gradient(to right, transparent calc(100% - 50px), #242425 calc(100% - 25px));
            }
        }

        &.mode-active {
            border-bottom-color: #0d9cfd;
            background-color: #2d2f32;

            &.cutoffName .name:before {
                background: linear-gradient(to right, transparent calc(100% - 50px), #2d2f32 calc(100% - 25px));
            }
        }

        &.mode-normal { /* nothing */ }

        &.mode-spacer {
            opacity: 0;
        }

        &.audioPlayback {
            border-bottom-color: #68c1fd;
        }
    }

    .scrollSpacer {
        display: none;

        width: calc(2em + 8px);
        height: 1px;

        flex-shrink: 0;
        flex-grow: 0;
    }

    &.hardScroll {
        scroll-behavior: unset;
    }

    &::-webkit-scrollbar {
        display: none;
    }
}

.moveContainer {
    position: absolute;

    left: 4em;
    top: 0;
    right: 0;

    display: none;
    flex-direction: row;

    width: min-content;

    background: #1e1e1e;
}