$navbar-height: 120px;
$pathbar-height: 50px;

@media only screen and (max-device-width: 480px) {
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        font-family: sans-serif;
    }
}

body {
    overflow: hidden;
}

.mobileInterface-container {
    height: 100%;
    position: relative;
    touch-action: none;
    width: 100%;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// Topbar of Dash Mobile
.navbar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: $navbar-height;
    background-color: whitesmoke;
    z-index: 150;

    .cover {
        position: absolute;
        right: 0px;
        top: 0px;
        height: 120px;
        width: 120px;
        background-color: whitesmoke;
        z-index: 200;
    }

    .toggle-btn {
        position: absolute;
        right: 20px;
        top: 30px;
        height: 70px;
        width: 70px;
        transition: all 400ms ease-in-out 200ms;
        z-index: 180;
    }

    .background {
        position: absolute;
        right: 0px;
        top: 0px;
        height: 120px;
        width: 120px;
        //border: 1px solid black;
    }

    .background.active {
        background-color: lightgrey;
    }

    .toggle-btn-home {
        right: -200px;
    }

    .header {
        position: absolute;
        top: 50%;
        top: calc(9px + 50%);
        right: 50%;
        transform: translate(50%, -50%);
        font-size: 40;
        font-weight: 700;
        text-align: center;
        user-select: none;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: ltr;
        width: 600px;
    }

    .toggle-btn span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 4px;
        background: black;
        transition: all 200ms ease;
        z-index: 180;
    }

    .toggle-btn span:nth-child(1) {
        transition: top 200ms ease-in-out;
        top: 30%;
    }

    .toggle-btn span:nth-child(3) {
        transition: top 200ms ease-in-out;
        top: 70%;
    }

    .toggle-btn.active {
        transition: transform 200ms ease-in-out 200ms;
        transform: rotate(135deg);
    }

    .toggle-btn.active span:nth-child(1) {
        top: 50%;
    }

    .toggle-btn.active span:nth-child(2) {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .toggle-btn.active span:nth-child(3) {
        top: 50%;
    }
}

.sidebar {
    position: fixed;
    top: 120px;
    opacity: 0;
    right: -100%;
    width: 80%;
    height: calc(80% - (120px));
    z-index: 101;
    background-color: whitesmoke;
    transition: all 400ms ease 50ms;
    padding: 20px;
    box-shadow: 0 0 5px 5px grey;

    .item {
        width: 100%;
        padding: 13px 12px;
        border-bottom: 1px solid rgba(200, 200, 200, 0.7);
        font-family: Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: normal;
        user-select: none;
        display: inline-flex;
        font-size: 35px;
        text-transform: uppercase;
        color: black;
    }

    .ink:focus {
        outline: 1px solid blue;
    }

    .sidebarButtons {
        top: 80px;
        position: relative;
    }
}






.blanket {
    position: fixed;
    top: 120px;
    opacity: 0.5;
    right: -100%;
    width: 100%;
    height: calc(100% - (120px));
    z-index: 101;
    background-color: grey;
    padding: 20px;
}

.blanket.active {
    position: absolute;
    right: 0%;
    z-index: 100;
}

.home {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 60;
    user-select: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 200;
}

.item-type {
    display: inline;
    text-transform: lowercase;
    margin-left: 20px;
    font-size: 35px;
    font-style: italic;
    color: rgb(28, 28, 28);
}

.item-title {
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.right {
    margin-left: 20px;
    z-index: 200;
}

.open {
    right: 20px;
    font-size: 35;
    position: absolute;
}

.left {
    width: 100%;
    height: 100%;
}



.sidebar.active {
    position: absolute;
    right: 0%;
    opacity: 1;
    z-index: 101;
}

.back {
    position: absolute;
    left: 42px;
    top: 0;
    background: #1a1a1a;
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    font-size: 25px;
    user-select: none;
    z-index: 100;
}

.pathbar {
    position: fixed;
    top: 118px;
    left: 0px;
    background: #1a1a1a;
    z-index: 120;
    border-radius: 0px;
    width: 100%;
    height: 80px;
    overflow: hidden;

    .pathname {
        position: relative;
        font-size: 25;
        top: 50%;
        width: 86%;
        left: 12%;
        color: whitesmoke;
        transform: translate(0%, -50%);
        z-index: 20;
        font-family: sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
        text-align: left;
        text-transform: uppercase;
    }

    .scrollmenu {
        overflow: auto;
        width: 100%;
        height: 100%;
        white-space: nowrap;
        display: inline-flex;
    }

    .hidePath {
        position: absolute;
        height: 100%;
        width: 200px;
        left: 0px;
        top: 0px;
        background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0));
        text-align: center;
        user-select: none;
        z-index: 99;
        pointer-events: none;
    }

    .pathbarItem {
        position: relative;
        display: flex;
        align-items: center;
        color: whitesmoke;
        text-align: center;
        justify-content: center;
        user-select: none;
        transform: translate(100px, 0px);
        font-size: 30px;
        padding: 10px;
        text-transform: uppercase;

        .pathbarText {
            font-family: sans-serif;
            text-align: center;
            height: 50px;
            padding: 10px;
            font-size: 30px;
            border-radius: 10px;
            text-transform: uppercase;
            margin-left: 20px;
            position: relative;
        }

        .pathIcon {
            transform: translate(0px, 0px);
            position: relative;
        }
    }
}


/**
* docButton appears at the bottom of mobile document
* Buttons include: pin to presentation, download, upload, reload
*/
.docButton {
    position: relative;
    width: 100px;
    display: flex;
    height: 100px;
    font-size: 70px;
    text-align: center;
    border: 3px solid black;
    margin: 20px;
    z-index: 100;
    border-radius: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.docButtonContainer {
    top: 80%;
    position: absolute;
    display: flex;
    transform: translate(-50%, 0);
    left: 50%;
    z-index: 100;
}

.toolbar {
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    height: max-content;
    top: 0px;
    border-radius: 20px;
    background-color: lightgrey;
    opacity: 0;
    transition: all 400ms ease 50ms;
}

.toolbar.active {
    display: inline-block;
    width: 300px;
    padding: 5px;
    opacity: 1;
    height: max-content;
    top: -450px;
}

.colorSelector {
    position: absolute;
    top: 550px;
    left: 280px;
    transform: translate(-50%, 0);
    z-index: 100;
    display: inline-flex;
    width: max-content;
    height: max-content;
    pointer-events: all;
    font-size: 80px;
    user-select: none;
}

// Menu buttons for toggling between list and icon view
.homeSwitch {
    position: fixed;
    top: 212;
    right: 36px;
    display: inline-flex;
    width: max-content;
    z-index: 99;
    height: 70px;

    .list {
        width: 70px;
        height: 70px;
        margin: 5;
        padding: 10;
        align-items: center;
        text-align: center;
        font-size: 50;
        border-style: solid;
        border-width: 3;
        border-color: black;
        background: whitesmoke;
        align-self: center;
        border-radius: 10px;
    }

    .list.active {
        color: darkred;
        border-color: darkred;
    }
}