@import "/UI/Style.scss";

$fullscreen-bg: black;

Chatbox {
    position: absolute;
    left: 0px;
    bottom: 200px;
    flex-direction: column;
    width: 700px;
    font-size: 16px;
    transition: transition 0.15s ease-out;
    height: 330px;
    padding: 0;
    font-family: $font-secondary;
    font-weight: bold;
    z-index: 100;

    .canvas {
        flex-direction: column;
        align-items: flex-start;
        overflow: scroll;
        height: 330px;
        width: 100%;
    }

    .input p {
        width: 15%;
        opacity: 0;
        color: $chat-input;
        align-items: center;
        justify-content: center;
    }

    .channel {
        width: 15%;
        opacity: 0;
        flex-direction: column;
        color: $chat-input;
        max-height: 40;
        overflow-x: hidden;
        align-items: center;
        padding-top: 10px;
    }

    .channel label {
        margin-bottom: 32px;
    }

    MessageInput {
        transition: all 0.15s ease;
        flex-shrink: 0;
        background-color: rgba(black, 0.3);
        opacity: 0;
        color: $chat-input;
        font-size: 18px;
        width: 85%;

        label {
            white-space: normal;
            color: $chat-input;
            padding-right: 50px;
            font-weight: bold;
        }
    }

    &.open {
        pointer-events: all;
        opacity: 1;
        background-color: rgba($gray-darker, 0.9);

        MessageInput,
        .input p,
        .channel {
            opacity: 1;
        }

        .canvas {
            ChatEntry {
                transition: opacity 0.1s ease;
                background-color: rgba(0, 0, 0, 0.0);
                opacity: 1;
            }
        }
    }

    &:intro {
        transform: translateX(-50);
    }
}