@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,[encoded data, 7584 characters]');
    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);
}