@import "app.scss";

$sidebar-width: 13rem;

/* Base
-------------------------------------*/
.container {
    margin-left: $sidebar-width;
    max-width: calc(100% - #{$sidebar-width});
}


/* Sidebar 
-------------------------------------*/
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: $sidebar-width;
    border-right: 1px solid $colorborder;
}

.sidebar-items {
    display: flex;
    flex-direction: column;

    height: 100%;
    padding: 1rem 0;

    letter-spacing: .2rem;
    line-height: 2rem;
    text-transform: uppercase;
    text-align: center;
}

.sidebar-head {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: .6rem;
}

.sidebar-end {
    font-weight: 700;
    margin-top: auto;    
    margin-bottom: 2rem;
}

.sidebar-link {
    font-weight: 600;
    text-decoration: none;
}

.sidebar-link:hover {
    color: $color01;
}

@media (max-width: 600px) {
    .sidebar{
        position: static;
        flex-direction: column;
        text-align: center;
        margin: 1rem auto ;
        border: 0;
        border-bottom: 1px solid $colorborder;
    }

    .sidebar-end {
        margin-bottom: 0;
    }

    .container{
        width: auto;
        max-width: 100%;
        padding: 2rem;
        margin: auto;
    }

}

/* Table 
-------------------------------------*/

.table {
    width: 100%;
    border-collapse: collapse;

    th {
        background: $colorfg;
        color: $colorborder;
        font-weight: 600;
        text-transform: uppercase;
    }

    td, th {
        padding: 6px;
        height: 2em;
        border-bottom: 1px solid $colorfg;
        text-align: left;
    }

    td.controls, th.controls {
        margin-left: 0;
        margin-right: auto;
    }

    td.controls {
        a, input[type=submit]{
            display: block;
            margin: 0;
            border: 0;
            padding: 0;
            width: 100%;
            text-transform: uppercase;
            text-decoration: none;
            text-align: left;
            font-weight: 600;
            letter-spacing: .1em;
            color: $colorfg;
        }

        input[type=submit] {
            background-color: white;
            cursor: pointer;
        }
    }

    th.controls a {
        display: block;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }
}