/* ===================================================================

Stylesheet für https://chat.schloss-hogwarts.de
Aufgabe: Formulare stylen
Datei: forms.css
Autor: Samuel Walz
Copyright (c) by Samuel Walz 2021

=================================================================== */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="url"] {
    box-sizing   : border-box;
    color        : var(--green);
    max-width    : 20rem;
    height       : 2.5rem;
    line-height  : 2rem;
    text-align   : left;
    border-radius: var(--border-radius);
    font-size    : 1rem;
    padding-left : .5rem;
    outline      : none;
    transition   : box-shadow, border 1s ease;
}

textarea {
    font-size    : 1rem;
    line-height  : 1.2rem;
    border-radius: var(--border-radius);
    padding      : 10px;
    outline      : none;
    transition   : box-shadow, border 1s ease;
}

input:hover,
input:focus,
textarea:hover,
textarea:focus {
    border    : 2px solid var(--chat-color);
    transition: box-shadow, border 1s ease;
}

button.standard,
input[type=button].standard {
    display            : block;
    min-width          : 12rem;
    line-height        : 2rem;
    font-size          : 1rem;
    background-color   : var(--chat-color);
    color              : var(--white);
    /* cursor          : pointer; */
    border             : 2px solid #666;
    border-radius      : 5px;
    transition         : all 1s ease;
}

button.standard:hover,
input[type=button].standard:hover {
    background-color: var(--green);
    transition      : all .5s ease;
}

form#login-form,
form#change_pw_form {
    padding-top   : 1rem;
    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
    max-width     : 30rem;
    gap           : 1rem;
    margin-left   : 1rem;
    max-height    : 10rem;
}

form#login-form label,
form#change_pw_form label {
    flex-basis: 25%;
    text-align: left;
}


form#login-form input,
form#change_pw_form input {
    flex-basis: 75%;
}

label[form] {
    flex-basis: 100%;
    font-size : 2rem;
    text-align: center;
    padding   : 1rem;
}


/* ===================================================================
2. Nachricht-Formular
=================================================================== */

form#chat_chatform {
    flex-basis: 20%;
    margin    : auto;
    padding   : 0 1rem 2rem 1rem;
    width     : 100%;
}

textarea {
    margin: auto;
    width : calc(100% - 4rem);
}

@media all and (min-width: 30rem) {
    form#chat_chatform {
        width: auto;
    }

    textarea {
        width       : 24rem;
        padding-left: .2rem;
    }
}



@media all and (min-width: 60rem) {
    form#chat_chatform {
        width: auto;
    }

    textarea {
        width       : 35rem;
        padding-left: .2rem;
    }
}

form#chat_chatform div#is_writing {
    opacity   : 0;
    height    : 1.5rem;
    transform : translate(0, 1.5rem);
    transition: transform, opacity .5s ease;
}

form#chat_chatform div#is_writing.visible {
    opacity       : 1;
    display       : flex;
    flex-direction: row;
    transform     : none;
}

/* Wer gerade schreibt - Grafik */
#isWritingCircles {
    width : auto;
    height: 80%;
}

.isWritingCircle {
    --animation-time: .6s;
    animation       : circleBounce var(--animation-time) ease-in-out infinite;
}

.isWritingCircle:nth-of-type(2) {
    animation-delay: calc(var(--animation-time) / 3);
}

.isWritingCircle:last-of-type {
    animation-delay: calc(var(--animation-time) / 1.5);
}

@keyframes circleBounce {

    0%,
    100% {
        transform: translateY(-25%);
    }

    50% {
        transform: translateY(25%);
    }
}

form#chat_chatform input[type="button"] {
    display: none;
}

form#chat_chatform label {
    display         : inline-block;
    margin-top      : 1rem;
    margin-left     : 1rem;
    width           : 2rem;
    width           : 2rem;
    font-size       : 1.3rem;
    font-weight     : 20;
    color           : var(--chat-color);
    background-color: transparent;
    border          : none;
}

form#chat_chatform label:hover {
    color     : var(--green);
    box-shadow: none;
}

g#sendicon {
    stroke              : var(--chat-color);
    stroke-width        : 60;
    /* fill             : var(--chat-color); */
    fill                : none;
    fill-rule           : nonzero;
    opacity             : 1;
    transform           : scale(0.095);
    transition          : fill, stroke .3s ease;
}

svg#sendicon_svg {
    width : 100%;
    height: 100%;
}

label#chat-chat_senden:is(:hover, :active, :focus) g#sendicon {
    fill      : var(--chat-color);
    stroke    : none;
    transition: fill, stroke .3s ease;
}

label#chat-chat_senden button {
    background: inherit;
    border    : none;
}

.full-editor-format-bar {
    display        : flex;
    flex-direction : row;
    justify-content: space-around;
    padding        : 4px;
    margin-bottom  : 0 !important;
    max-width      : 35rem;
}

.full-editor-format-buttons {
    background: none;
    border    : none;
    display   : inline-block;
    height    : 24px;
    padding   : 3px 5px;
    width     : 28px;
    overflow  : visible;
    margin    : 0;
    outline   : none;
    color     : var(--chat-color);
    transition: opacity .2s ease;
}

.full-editor-format-buttons:is(:hover, :active, :focus) {
    opacity   : .7;
    transition: opacity .2s ease;
}

.bbcode-size {
    border    : none;
    background: none;
}

.invisible {
    display: none;
}

div#smiley-box,
div#color-box {
    padding                   : .5rem;
    border                    : 1px solid var(--chat-color);
    border-bottom             : none;
    border-radius             : 5px;
    border-bottom-left-radius : 0;
    border-bottom-right-radius: 0;
    max-width                 : 35rem;
}

div#smiley-box a {
    margin-left: .2rem;
}

div#color-box table {
    border         : none;
    border-collapse: collapse;
    margin         : auto;
}

td.color_colorlist {
    padding: 0;
    border : 1px solid var(--white);
}


/* ===================================================================
2. "Neuer Chat"-Formular
=================================================================== */

section#new_chat_container,
section#edit_message_container {
    position     : fixed;
    top          : 0;
    bottom       : 0;
    right        : 0;
    left         : 0;
    margin       : auto;
    width        : max-content;
    height       : max-content;
    padding      : min(2rem, 10vh) min(1rem, 5vw);
    background   : var(--chat-bg-color);
    border       : 1px solid var(--chat-nav-color);
    border-radius: var(--border-radius);
}

section#new_chat_container:not(.invisible),
section#edit_message_container:not(.invisible) {
    z-index: 3;
}

form#new_chat_form {
    display         : flex;
    flex-direction  : column;
    width           : 30rem;
    min-height      : 3rem;
    font-size       : 1.1rem;
    transition      : width .5s ease-in-out;
    background-color: transparent;
    border          : none;
    border-bottom   : 2px solid grey;
}

div#new_chat_chatname_div {
    flex-basis    : 25%;
    display       : flex;
    flex-direction: row;
}

div#new_chat_chatname_div label {
    flex-direction: 25%;
}

div#new_chat_chatname_div input {
    flex-basis: 75%;
}

input#search_persons {
    flex-basis      : 50%;
    font-size       : 1.1rem;
    background-color: transparent;
    box-shadow      : none;
    outline         : none;
    padding         : 0 .2rem;
    margin          : 0 0 .5rem 0;
    box-shadow      : none;
    height          : 3rem;
    width           : 80%;
    border          : none;
}

button#create_group {
    margin          : 1rem 0;
    margin-left     : calc(100% - 10rem);
    font-size       : 1.1rem;
    min-width       : 6rem;
    max-width       : 10rem;
    height          : 2.5rem;
    background-color: var(--chat-color);
    color           : var(--white);
    border          : 2px solid #666;
    border-radius   : 5px;
    transition      : all 1s ease;
}

button#create_group:hover {
    background-color: var(--green);
    transition      : all .5s ease;
}

div#new_chat_person_container {
    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
    max-width     : 30rem;
    margin        : .5rem auto
}

div.new_chat_name-div {
    flex-basis      : 20%;
    margin          : .2rem;
    display         : flex;
    flex-direction  : row;
    background-color: var(--chat-color);
    color           : var(--white);
    font-size       : 1.1rem;
    border          : 1px solid transparent;
    border-radius   : 5px;
    padding         : .1rem;
}

div.name_new_chat,
div.delete_new_chat_name {
    padding: .1rem;
}

div.name_new_chat {
    flex-basis: 75%;
}

div.delete_new_chat_name {
    flex-basis: 20%;
    cursor    : pointer;
}

/* ===================================================================
2. Settings-Formular
=================================================================== */

form#settings-form select {
    flex-basis: 75%;
    border    : none;
    outline   : none;
    color     : var(--primary);
}

form#settings-form fieldset {
    margin-top   : 2rem;
    border-radius: var(--border-radius);
    padding      : .5em;
}

form#settings-form label:not([form]) {
    flex-basis: 20%;
}

form#settings-form,
form#settings-form fieldset {
    padding-top   : 1rem;
    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
    max-width     : 40rem;
    gap           : 1rem;
    margin-left   : 1rem;
}

form#settings-form>input {
    color: var(--chat-color);
}


form#settings-form>input,
form#settings-form fieldset input {
    flex-basis: 70%;
}

form#settings-form fieldset#nav {
    width     : 100%;
    background: var(--nav-bg-color);
    color     : var(--nav-color);
}

form#settings-form fieldset#chat-nav {
    width     : 100%;
    background: var(--chat-nav-bg-color);
    color     : var(--chat-nav-color);
}

form#settings-form fieldset#chat {
    width     : 100%;
    background: var(--chat-bg-color);
    color     : var(--chat-color);
}