// components
@import '/src/component/PostGrid/$PostGrid';
@import '/src/component/PostTile/$PostTile';
@import '/src/component/Searchbar/$Searchbar';
@import '/src/component/IconButton/$IconButton';
@import '/src/component/IonIcon/$IonIcon';
@import '/src/component/Drawer/$Drawer';
@import '/src/component/DetailPanel/$DetailPanel';
// routes
@import '/src/route/post/$post_route';
@import '/src/route/login/$login_route';

:root {
    --primary-color: #d1d1ee;
    --primary-color-dark: #9696b3;
    --primary-color-darker: #72728d;
    --secondary-color-9: #aeaeec;
    --secondary-color-8: #9a9ad6;
    --secondary-color-7: #7c7cb8;
    --secondary-color-6: #646497;
    --secondary-color-5: #545486;
    --secondary-color-4: #424268;
    --secondary-color-3: #3b3b66;
    --secondary-color-2: #24243b;
    --secondary-color-1: #1e1e2c; // background color
    --secondary-color-0: #07070c;
    --shadow-color: #09090e50;

    --border-radius-small: 0.4rem;
    --border-radius-medium: 0.8rem;
    --border-radius-large: 1.2rem;
    --nav-height: 50px;
}
html {
    overflow-x: hidden;
    font-size: 14px;
    scroll-behavior: smooth;
    ::-webkit-scrollbar {
        background-color: var(--secondary-color-1);
        width: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #aeaeec;
        border-radius: 2px;
    }
}
body {
    overflow-x: hidden;
    background-color: var(--secondary-color-1);
    color: var(--primary-color);
    margin: 0;
    font-family: Microsoft Yahei;
}

nav {
    display: flex;
    width: 100%;
    height: var(--nav-height);
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: color-mix(in srgb, var(--secondary-color-1) 70%, transparent);
    justify-content: space-between;
    align-items: center;
    padding-inline: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(3px);

    a.title {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        text-decoration: none;
        .booru-name {
            color: var(--secondary-color-9);
            margin: 0;
        }

        .app {
            display: flex;
            align-items: center;
            border-radius: var(--border-radius-small);
            // border: 1px solid var(--secondary-color-9);
            // padding: 0.2rem 0.4rem;
            margin: 0;
            gap: 0.4rem;
            .version {
                color: var(--secondary-color-1);
                background-color: var(--secondary-color-9);
                padding: 0.2em 0.4em;
                border-radius: var(--border-radius-small);
                font-size: 0.8rem;
                font-weight: bold;
            }
            .app-name {
                display: none;
                font-size: 1rem;
                color: var(--secondary-color-9);
            }
        }
    }
    div.searchbar {
        padding: 0.4rem 10%;
        max-width: 500px;
        background-color: color-mix(in srgb, var(--secondary-color-2) 30%, transparent);
        border: 1px solid var(--primary-color-darker);
        border-radius: var(--border-radius-small);
        color: var(--primary-color-dark);
        transition: 0.3s all ease;
        cursor: pointer;
        &:hover {
            color: var(--primary-color);
        }
    }
    div.buttons {
        display: flex;
        align-items: center;
        gap: 1rem;
        ion-icon {
            // background-color: var(--secondary-color-1);
            transition: all 0.3s ease;
            border-radius: 1rem;
            padding: 0.4rem;
            &:hover {
                background-color: color-mix(in srgb, var(--secondary-color-3) 50%, transparent);
            }
        }
        ion-icon.search {
            display: none;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div.account {
            height: 2rem;
            width: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 2rem;
            font-weight: bolder;
            color: var(--secondary-color-9);
            background-color: var(--secondary-color-4);
            user-select: none;
            cursor: pointer;
        }
    }

    @media (max-width: 800px) {
        div.searchbar {
            display: none;
        }
        div.buttons ion-icon {
            &.search {
                display: inline-block;
            }

            &.detail-panel {
                display: none;
            }
        }
    }
}

router {
    display: block;
    position: relative;

    route {
        display: block;
        position: relative;
        padding-inline: 1rem;
        padding-top: var(--nav-height);
    }
}

route#posts {
    
    header {
        margin-bottom: 1rem;
        h2 {
            margin: 0;
        }
        div.tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
    }

    .post-grid.detail-panel-enabled {
        width: calc(100vw - 300px - 4rem);
        @media (max-width: 800px) {
            width: 100%;
        }
    }
    
    @media (max-width: 800px) {
        detail-panel {
            display: none;
        }
    }
}

section {
    background-color: #2f2f45;
    border-radius: var(--border-radius-large);
    padding: 20px;
}

button {
    background-color: var(--secondary-color-4);
    color: var(--secondary-color-9);
    padding: 0.8rem 1.2rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;

    &:hover {
        background-color: var(--secondary-color-6);
        color: var(--primary-color);
    }
}

a {
    text-decoration: none;
    color: var(--secondary-color-9);
}

input {
    background-color: var(--secondary-color-2);
    border-radius: var(--border-radius-small);
    border: 1px solid var(--secondary-color-3);
    font-size: 0.9rem;
    padding: 0.8rem 1.2rem;
    color: var(--primary-color);
    outline: none;
    &:focus {
        border-color: var(--secondary-color-9);
    }
}