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

Stylesheet für https://chat.schloss-hogwarts.de
Aufgabe: Die Navigation für alle Mediengruppen organisieren
Datei: nav-flex.css
Autor: Samuel Walz
Copyright (c) by Samuel Walz 2021

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

/* ===================================================================
2. Allgemeine Styles
=================================================================== */

body {
    font-family: sans-serif;
    font-size  : 16px;
}

nav {
    background: var(--nav-bg-color);
    position  : sticky;
    top       : 0;
    height    : var(--nav-height);
}

.item a {
    color          : var(--nav-color);
    text-decoration: none;
    cursor         : pointer;
}

.menu,
.submenu {
    list-style-type: none;
}

.item a,
.subitem a {
    display   : block;
    width     : 100%;
    height    : 100%;
    transition: all .5s ease;
}

.item a:hover,
a.item:hover,
.item a:hover span.submenu-change {
    color     : var(--white);
    background: var(--nav-color);
    transition: all .5s ease;
}

/* ===================================================================
  2. Menü
  =================================================================== */

/*
   * Made by Erik Terwan
   * 24th of November 2015
   * MIT License
   *
   *
   * If you are thinking of using this in
   * production code, beware of the browser
   * prefixes.
   */

nav {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    border-bottom  : 2px solid var(--nav-color);
    padding        : .5rem 1rem .5rem;
}

.item.button {
    flex            : 1;
    max-width       : 12rem;
    margin-left     : .5rem;
    z-index         : 3;
    background-color: var(--white);
    border          : 2px solid var(--nav-color);
    border-radius   : 5px;
    text-align      : center;
    padding         : .5rem;
    max-height      : 3rem;
    transition      : all .5s ease;
}

@media (max-height: 30rem) {
    :root {
        --nav-height: 3rem !important;
    }

    .item.button[href="https://test.chat.schloss-hogwarts.de/logout"] {
        visibility: hidden;
        padding   : 0;
        margin    : 0;
        width     : 0;
        height    : 0;
    }

    .item.button[href="https://test.chat.schloss-hogwarts.de/logout"]::after {
        content   : "";
        display   : inline-block;
        background: url('https://api.iconify.design/fa-sign-out.svg?color=rgb(190, 40, 20)') no-repeat center center / contain;
        visibility: visible;
        width     : 2rem;
        height    : 2rem;
        color     : rgb(243, 19, 19);
    }
}

.item.button.chat_nav {
    border          : none;
    color           : var(--chat-nav-color);
    background-color: var(--nav-bg-color);
    width           : 12rem;
}

.item.button.chat_nav ul {
    overflow-y      : scroll;
    display         : none;
    max-height      : 80vh;
    background-color: var(--nav-bg-color);
}

.item.button.chat_nav:hover ul {
    display    : block;
    position   : relative;
    padding-top: 1rem;
    z-index    : 7;
}

.item.button.chat_nav:hover ul li.chat_navigation_item {
    position: relative;
}

div#chat_navigation {
    display: none !important;
}

div#chat_inner_container {
    flex-basis: 100% !important;
}

@media all and (min-width: 60rem) {
    .item.button.chat_nav {
        display: none;
    }

    div#chat_navigation {
        display: block !important;
    }
}

.item a {
    padding: 10px 50px;
}

.menuToggle {
    flex               : 1;
    display            : block;
    position           : relative;
    top                : .5rem;
    left               : 0;
    z-index            : 1;
    -webkit-user-select: none;
    user-select        : none;
}

.menuToggle button,
.menuToggle input {
    display              : block;
    width                : 40px;
    height               : 32px;
    position             : absolute;
    top                  : -7px;
    left                 : -5px;
    cursor               : pointer;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
}

.menuToggle button {
    background: transparent;
    border    : none;
    z-index   : 6;
}

.menuToggle input {
    opacity: 0;
    /* hide this */
    z-index: 7;
}

/*
* Just a quick hamburger
*/
.menuToggle>span {
    display         : block;
    width           : 33px;
    height          : 4px;
    margin-bottom   : 5px;
    position        : relative;
    background      : var(--nav-color);
    border-radius   : 3px;
    z-index         : 6;
    transform-origin: 4px 0px;
    transition      : transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

.menuToggle span:first-child {
    transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
.menuToggle input:checked~span {
    opacity  : 1;
    transform: rotate(45deg) translate(-2px, -1px);
}

/*
* But let's hide the middle one.
*/
.menuToggle input:checked~span:nth-last-child(3) {
    opacity  : 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
.menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
.menu {
    z-index               : 5;
    position              : absolute;
    width                 : 300px;
    margin                : -100px 0 0 -50px;
    padding-top           : 125px;
    padding-bottom        : 50px;
    background            : var(--nav-bg-color);
    box-shadow            : rgba(0, 0, 0, 0.5) 10px 10px 10px;
    list-style-type       : none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin      : 0% 0%;
    transform             : translate(-100%, 0);
    transition            : transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.menu li {
    font-size: 22px;
}

/*
* And let's slide it in from the left
*/
.menuToggle input:checked~ul {
    transform: none;
}

/* ===================================================================
  2. Sub - Menü
  =================================================================== */

.submenu {
    z-index: 2;
}

.subitem a {
    padding: 10px 50px;
}

ul.submenu {
    position              : absolute;
    width                 : 300px;
    padding-top           : 10px;
    padding-bottom        : 50px;
    background            : var(--nav-bg-color);
    box-shadow            : rgba(0, 0, 0, 0.5) 10px 10px 10px;
    list-style-type       : none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin      : 0% 0%;
    transform             : translate(-100%, 0);
    transition            : transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.has-submenu:hover>ul.submenu {
    transform: none;
}

.subitem a {
    padding: 10px 50px;
}