@import "mixin";
@import "properties";

:global {
    .modal-body.modal-music-manage {
        padding: 0 !important;

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

        width: 80em;
        min-height: 20em; /* Set it here, so we dont have a inner modal scroll */

        @include user-select(none);

        > .header {
            flex-grow: 0;
            flex-shrink: 0;

            height: 4em;

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

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

                min-width: 0;
                width: 50%;

                position: relative;
                overflow: hidden;

                cursor: pointer;
                padding-bottom: 2px;

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

                a {
                    text-align: center;
                    color: #e1e1e1;

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

                &:hover {
                    border: none;
                    border-bottom: 2px solid #4e4e4e;

                    padding-bottom: 0;

                    &:before {
                        position: absolute;
                        content: '';

                        margin-right: -10em;
                        margin-left: -10em;
                        margin-bottom: -.2em;
                        bottom: 0;

                        height: 100%;
                        width: calc(100% + 20em);

                        box-shadow: inset 0px -1.2em 3em -20px #424242;
                    }
                }

                &.selected {
                    border: none;
                    border-bottom: 2px solid #0073d4;

                    padding-bottom: 0;

                    &:before {
                        position: absolute;
                        content: '';

                        margin-right: -10em;
                        margin-left: -10em;
                        margin-bottom: -.2em;
                        bottom: 0;

                        height: 100%;
                        width: calc(100% + 20em);

                        box-shadow: inset 0px -1.2em 3em -20px #0073d4;
                    }
                }
            }
        }

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

            min-height: 20em;

            background-color: #303036;

            @include tooltip(1.6em, 1em);
            .container {
                flex-grow: 0;
                flex-shrink: 1;

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

                min-height: 20em;
                height: 40.5em;

                .input-boxed, .btn {
                    height: 2em;
                }

                $border_color: #1e2025;
                &.category-permissions {
                    .column {
                        flex-shrink: 0;
                        flex-grow: 0;

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

                        &.column-permission {
                            flex-shrink: 1000;
                            flex-grow: 1;
                            min-width: 6em;

                            a {
                                @include text-dotdotdot();
                            }

                            .master {
                                font-weight: bold;
                            }

                            .slave {
                                padding-left: 1em;
                            }
                        }

                        &.column-required {
                            flex-shrink: 1;
                            flex-grow: 0;

                            a {
                                @include text-dotdotdot();
                            }

                            min-width: 6em;
                            width: 10em;
                        }

                        &.column-client-specific {
                            flex-shrink: 1;
                            flex-grow: 0;

                            min-width: 20em;
                            width: 30em;
                        }
                    }

                    .table-head {
                        flex-shrink: 0;
                        flex-grow: 0;

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

                        .column {
                            height: 5.5em;
                            padding: .5em;

                            justify-content: flex-end!important;

                            &.column-permission, &.column-required {
                                color: #e1e1e1;
                                font-weight: bold;

                                border-right: 1px solid $border_color;
                            }
                        }

                        .select-client {
                            padding-top: .5em;

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

                            input {
                                flex-grow: 1;
                                flex-shrink: 1;
                                min-width: 1em;
                            }

                            button {
                                flex-grow: 0;
                                flex-shrink: 0;

                                width: 5em;
                                margin-left: 1em;
                            }
                        }

                        .client-select, .client-info {
                            display: flex;
                            flex-direction: column;
                            justify-content: stretch;

                            &.hidden {
                                display: none;
                            }

                            button {
                                flex-grow: 0;
                                flex-shrink: 0;
                                margin-left: 1em;

                                @include text-dotdotdot();

                                &.button-search {
                                    width: 6em;
                                }

                                &.button-list-clients, &.button-client-deselect {
                                    width: 8em;
                                }
                            }

                            .row {
                                height: 2em;

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

                                &:not(:first-of-type) {
                                    margin-top: .5em;
                                }

                                a {
                                    flex-grow: 1;
                                    flex-shrink: 1;
                                    min-width: 0;

                                    align-self: center;

                                    @include text-dotdotdot();
                                }

                                input {
                                    flex-grow: 1;
                                    flex-shrink: 1;

                                    min-width: 2em;
                                }
                            }
                        }

                        .client-info {
                            color: #e1e1e1;
                            font-weight: bold;

                            a {
                                flex-shrink: 0;
                                margin-right: .5em;
                            }

                            .htmltag-client {
                                color: #e1e1e1;
                                align-self: center;

                                @include text-dotdotdot();
                            }
                        }
                    }

                    .table-body {
                        flex-shrink: 1;
                        flex-grow: 1;

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

                        min-height: 6em;

                        overflow-x: hidden;
                        overflow-y: auto;

                        @include chat-scrollbar-vertical();

                        .entry {
                            height: 2.6em; /* input box + 2 * .5em */
                            padding: .5em;

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

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

                            background-color: unset;

                            &:nth-of-type(2n) {
                                background-color: #25252a;
                            }

                            border-top: 1px solid $border_color;
                            border-right: 1px solid $border_color;

                            .container-input {
                                color: #e1e1e1;

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

                                &.hidden {
                                    display: none;
                                }

                                input {
                                    text-align: right;

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

                                    min-width: 2em;

                                    outline: none;
                                    background: transparent;
                                    border: none;

                                    height: 1.6em;

                                    /* fix the column padding */
                                    padding-left: 1em;
                                    margin-left: -.5em; /* have a bit of space on both sides */

                                    color: #999;
                                }

                                .container-tooltip {
                                    flex-shrink: 0;
                                    flex-grow: 0;
                                }

                                border-bottom: 2px solid transparent;

                                &:focus-within {
                                    border-bottom-color: #3f7dbf;

                                    input {
                                        color: #e1e1e1;
                                    }
                                }
                                @include transition(border-bottom-color $button_hover_animation_time ease-in-out);
                            }
                        }

                        .column-client-specific {
                            position: relative;

                            .entry {
                                border-right: unset;
                            }

                            .overlay-client-list {
                                position: absolute;
                                z-index: 1;

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

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

                                border-top: 1px solid $border_color;
                                background-color: #303036;
                                padding: .5em;

                                opacity: 1;
                                pointer-events: all;

                                @include transition(all .25s ease-in-out);

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

                                .title {
                                    flex-grow: 0;
                                    flex-shrink: 0;
                                }

                                .container-client-list {
                                    flex-grow: 1;
                                    flex-shrink: 1;

                                    position: relative;

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

                                    border: 1px #161616 solid;
                                    border-radius: 0.2em;
                                    background-color: #28292b;

                                    overflow-x: hidden;
                                    overflow-y: auto;

                                    padding-top: 0.25em;
                                    padding-bottom: 0.25em;

                                    margin-top: .5em;
                                    margin-bottom: .5em;

                                    @include chat-scrollbar-vertical();

                                    .overlay {
                                        position: absolute;
                                        z-index: 1;

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

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

                                        background-color: #28292b;
                                        color: #676468;

                                        text-align: center;
                                        font-size: 1.3em;

                                        &.hidden {
                                            display: none;
                                        }
                                    }

                                    .client {
                                        padding-left: .5em;
                                        padding-right: .5em;

                                        .htmltag-client {
                                            @include text-dotdotdot();
                                            color: #999;
                                            font-weight: unset;
                                        }

                                        &:hover {
                                            background-color: #2c2d2f;
                                        }

                                        &.hidden {
                                            display: none;
                                        }
                                    }
                                }

                                .container-buttons {
                                    flex-grow: 0;
                                    flex-shrink: 0;

                                    display: flex;
                                    flex-direction: row;
                                    justify-content: flex-end;
                                }
                            }
                        }
                    }

                    .container-buttons {
                        flex-shrink: 0;
                        flex-grow: 0;

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

                        margin-top: .5em;
                    }
                }

                &.category-settings {
                    .container-settings {
                        flex-grow: 1;
                        flex-shrink: 1;
                        min-height: 10em;

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

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

                            width: 50%;
                            min-width: 15em;

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

                            padding: .5em;

                            &.settings-bot {
                                border-right: 1px solid $border_color;

                                padding-left: 0;
                            }

                            &.settings-playlist {
                                padding-right: 0;
                            }

                            > a {
                                color: #e1e1e1;
                                font-weight: bold;
                            }

                            .body {
                                display: flex;
                                flex-direction: column;
                                justify-content: flex-start;

                                > label, > div {
                                    display: flex;
                                    justify-content: flex-start;
                                    flex-direction: row;

                                    margin-top: .5em;

                                    * {
                                        align-self: center;
                                    }
                                }

                                a {
                                    @include text-dotdotdot();
                                }

                                .container-name-country {
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: stretch;

                                    .option-bot-name {
                                        flex-grow: 1;
                                        flex-shrink: 1;

                                        min-width: 6em;
                                        margin-right: 1em;
                                    }

                                    .container-country {
                                        flex-grow: 0;
                                        flex-shrink: 0;

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

                                        width: 5em;

                                        input {
                                            flex-shrink: 1;
                                            flex-grow: 1;
                                            min-width: 0;
                                        }

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

                                            margin: .5em;
                                        }
                                    }
                                }

                                .checkbox {
                                    margin-right: .5em;
                                }

                                .container-replay-mode, .container-max-playlist-size {
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: stretch;

                                    a {
                                        flex-grow: 1;
                                        flex-shrink: 1;

                                        min-width: 0;
                                    }

                                    select, .input-boxed {
                                        flex-grow: 0;
                                        flex-shrink: 0;

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

                                        width: 10em;

                                        margin-left: .5em;

                                        input {
                                            flex-shrink: 1;
                                            flex-grow: 1;

                                            min-width: 0;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .container-buttons {
                        flex-grow: 0;
                        flex-shrink: 0;

                        display: flex;
                        flex-direction: row;
                        justify-content: flex-end;
                    }
                }

                &.hidden {
                    display: none;
                }
            }
        }
    }

    .tooltip-music-permission-overview {
        padding-left: .25em;
        padding-right: .25em;
        text-align: left;

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

        max-height: 8em;

        .container-title {
            flex-grow: 0;
            flex-shrink: 0;
        }

        .container-groups {
            flex-grow: 0;
            flex-shrink: 1;

            min-height: 0;

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

            overflow-x: hidden;
            overflow-y: auto;

            @include chat-scrollbar-horizontal();
        }

        .container-status {
            &.hidden {
                display: none;
            }
        }
    }
}