@tailwind base;
@tailwind components;
@tailwind utilities;

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.app-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.side-nav {
    display: grid;
    grid-template-rows: 80px 320px;
    background: #3D2C2E;
    color: whitesmoke;
    width: 20%;
    padding-left: 30px;

    .dashboard-title {
        color: whitesmoke;
        display: flex;
    }

    .dashboard-title:before {
        content: url("images/icons/dashboard.svg");
        display: inline-block;
        width: 40px;
        height: auto;
        fill: white;
    }

    .primary-list {
        list-style-type: none;

        & li {
            display: flex;
        }

        & li:before {
            display: inline-block;
            width: 35px;
            height:auto;
            padding-right: 10px;
        }

        & li:nth-child(1):before {
            content: url('images/icons/home.svg');
            width:34px;
        }

        & li:nth-child(2):before {
            content: url('images/icons/profile.svg');
            width:34px;
        }

        & li:nth-child(3):before {
            content: url('images/icons/messages.svg');
        }

        & li:nth-child(4):before {
            content: url('images/icons/history.svg');
        }

        & li:nth-child(5):before {
            content: url('images/icons/tasks.svg');
        }

        & li:nth-child(6):before {
            content: url('images/icons/communities.svg');
            width:33px;
        }
    }

    .secondary-list {
        list-style-type: none;

        & li {
            display: flex;
        }

        & li:before {
            display: inline-block;
            width: 35px;
            height:auto;
            padding-right: 10px;
        }

        & li:nth-child(1):before {
            content: url('images/icons/settings.svg');
        }

        & li:nth-child(2):before {
            content: url('images/icons/support.svg');
            width: 33px;
        }

        & li:nth-child(3):before {
            content: url('images/icons/privacy.svg');
            width: 33px;
        }
    }
}

.main-content {
    width: 80%;
    display: flex;
    flex-direction: column;

    .header {
        padding: 20px;
        display: grid;
        height: 20%;

        .search-bar:focus-visible {
            outline-color: #424C55;
        }

        .project-box {
            border-left-width: 16px;
            border-left-color: #D1CCDC;
        }

        .buttons > button {
            background-color: #886F68;
        }
    }
}