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

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