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

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

    flex-shrink: 1;

    padding: 1em;

    max-width: 100%;
    min-width: 20em;
    width: 50em;

    @include user-select(none);
}

.containerGeneral {
    flex-shrink: 0;

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

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

        margin-bottom: 1em;

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

            min-width: 3em;
        }
    }
}

.channelName {
    display: flex;
    flex-direction: row;
    justify-content: stretch;

    width: 100%;
    min-width: 10em;

    .select {
        margin-right: 1em;
        width: 10em;
    }

    &.hasParent {
        .select {
            display: none;
        }
    }
}

.buttons {
    margin-top: 1em;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    flex-shrink: 0;

    .cancelCreate {
        > * {
            margin-left: 1em;
        }
    }

    .advancedSwitch {
        align-self: center;
    }
}


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

    min-height: min-content;

    overflow: hidden;

    display: flex;
    position: relative;
    @include transition(.25s ease-in-out);
}

.settingsAdvanced, .settingsSimple {
    flex-grow: 1;
    flex-shrink: 1;

    width: 50em;

    &.hidden {
        position: absolute;
        top: 0;
    }

    &.settingsSimple.hidden {
        transform: translate(-100%, -100%);
    }

    &.settingsAdvanced.hidden {
        transform: translate(100%, 100%);
    }

    .top, .bottom {
        flex-grow: 1;
        flex-shrink: 1;

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

        min-height: 5em;
        max-height: 60%;
    }

    .right, .left {
        flex-shrink: 1;
        flex-grow: 1;

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

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

    .top {
        border-bottom: 2px solid #111113;

        .left, .right {
            padding-bottom: .5em;
        }
    }

    .bottom {
        .left, .right {
            padding-top: .5em;
        }
    }

    .left {
        border-right: 2px solid #111113;
        padding-right: .5em;
    }

    .right {
        border: none;
        padding-left: .5em;
    }

    .left, .right {
        flex-grow: 1;
        flex-shrink: 1;

        width: 50%;
    }

    .left {
        padding-right: .5em;
        border-right: 2px solid #111113;
    }

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

    .header {
        text-align: center;
        color: #548abc;
    }

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

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

    min-height: 5em;

    border-radius: .2em;
    border: 1px solid #111112;

    background-color: #17171a;

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

        width: 100%;
        height: 100%;
    }
}

.settingsSimple {
    display: flex;
    flex-direction: row;
    justify-content: stretch;

    min-height: 5em;
    border-radius: 0.2em;
    border: 1px solid #111112;
    background-color: #17171a;
    padding: .5em;
}

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

    margin-top: .5em;

    .title {}
}

.tooltip {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-right: .25em;
    margin-left: .25em;

    height: 100%;
    width: 1.1em;

    img {
        max-height: 100%;
        max-width: 100%;
    }
}

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

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

        height: 2em;

        > div {
            align-self: center;
        }

        > div:first-child {
            flex-shrink: 0;
        }
    }

    .limit {
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 2em;

        margin-left: 3em;
    }
}

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

    .hint {
        color: #383838;
        font-size: .8em;
    }

    p {
        align-self: center;
    }

    a {
        padding-left: .5em;
        font-weight: bold;
    }
}

.codecInfoContainer {
    width: 100%;

    padding-top: .5em;

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


.bbcodeEditor {
    position: relative;

    flex-grow: 1!important;
    flex-shrink: 1!important;

    min-height: 10em;
    max-height: 22.5em;

    border-radius: .2em;
    border: 1px solid #111112;

    overflow: hidden;

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

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

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

        width: 100%;
        height: 2.5em;

        background-color: #17171a;
        font-size: .8em;

        padding: .25em;

        .button {
            cursor: pointer;

            padding: .5em;
            &:not(:first-child) {
                margin-left: .25em;
            }

            border-radius: .2em;
            border: 1px solid #111112;

            background-color: #121213;

            height: 2em;
            width: 2em;

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

            text-align: center;
            align-self: center;

            &.buttonBold {
                font-weight: bold;
            }

            &.buttonItalic {
                font-style: italic;
            }

            &.buttonUnderline {
                text-decoration: underline;
            }

            &.buttonColor {
                input {
                    position: absolute;
                    width: 0;
                    height: 0;
                    opacity: 0;
                }
            }

            &:hover {
                background-color: #0f0f0f;
                @include transition(background-color $button_hover_animation_time);
            }
        }
    }

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

        min-height: 2.5em;
        height: 5em;
        max-height: 20em;

        border: none;
        border-radius: 0;
        border-top: 1px solid #111112;


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

        resize: vertical;

        @include chat-scrollbar-vertical();
    }

    &:focus-within {
        background-color: #131b22;
        //border-color: #284262;
    }
}

.rainbowLetter {
    background-image: url('data:img/png;base64,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');
    background-size: 100% 100%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: bold;
    border-bottom: 1px solid #ab4788;
    line-height: 1em;
}

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

    .blockProperty {
        flex-direction: row;
        justify-content: stretch;

        .title {
            flex-shrink: 0;
            width: 10em;
        }
    }
}

.deleteDelay {
    display: flex;
    flex-direction: row;
    justify-content: stretch;

    flex-grow: 1;

    .input {
        flex-grow: 1;
        align-self: center;
    }

    .button {
        height: 2em;
        padding-top: .2em;
        margin-left: 1em;
        align-self: center;

        &.hidden {
            display: none;
        }
    }
}

.encryptVoiceData {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .switch {
        margin-right: 1em;
    }
}

.containerPermissions {
    position: relative;
    flex-direction: row!important;

    .blockProperty {
        flex-direction: row;
        justify-content: stretch;

        .title {
            flex-shrink: 0;
            width: 8em;
        }
    }

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

    .overlay {
        position: absolute;

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

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

        .text {
            align-self: center;
            text-align: center;

            &.error {
                color: #a10000;
            }
        }
    }
}

.iconContainer {
    position: relative;

    height: 2em;
    border-radius: .2em;

    margin-left: 1em;

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

    cursor: pointer;
    background-color: #121213;
    border: 1px solid #0d0d0d;

    .preview {
        height: 100%;
        width: 3em;

        border: none;
        border-right: 1px solid #0d0d0d;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        > div {
            align-self: center;
        }

        @include transition(border-color $button_hover_animation_time ease-in-out);
    }

    .containerDropdown {
        position: relative;
        cursor: pointer;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        height: 100%;
        width: 1.5em;

        .button {
            text-align: center;

            .arrow {
                border-color: #999999;
            }
        }

        .dropdown {
            display: none;
            position: absolute;
            width: max-content;

            top: 100%;

            z-index: 10;

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

            background-color: #121213;
            border: 1px solid #0d0d0d;
            border-radius: .2em 0 .2em .2em;

            right: -1px;

            .entry {
                padding: .5em;

                &:not(:last-of-type) {
                    border: none;
                    border-bottom: 1px solid #0d0d0d;
                }

                &:hover {
                    background-color: #17171a;
                }
            }
        }

        &:hover {
            border-bottom-right-radius: 0;
            .dropdown {
                display: flex;
            }
        }
    }

    &:hover {
        background-color: var(--boxed-input-field-focus-background);
        border-color: var(--boxed-input-field-focus-border);

        .preview {
            border-color: var(--boxed-input-field-focus-border);
        }
    }

    &.disabled {
        background-color: var(--boxed-input-field-disabled-background);
        border-color: var(--boxed-input-field-border);

        .preview {
            border-color: var(--boxed-input-field-border);
        }

        .dropdown {
            display: none!important;
        }
    }

    @include transition(border-color $button_hover_animation_time ease-in-out);
}