@use "theme";
@use "tailwind/spacing";

body.admin {
    width: 100%;
    max-width: spacing.$max-width-5xl;
    padding: spacing.s(16) spacing.s(8);
    margin: 0 auto;
    display: grid;
    grid-template-columns: spacing.s(64) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "logo none"
        "sidebar main"
        "footer footer";
    gap: spacing.s(4);

    > h1 {
        @include theme.heading2(true);
        grid-area: logo;
    }

    > aside[role="navigation"] {
        grid-area: sidebar;

        ul {
            list-style: none;
            margin: unset;
            padding: unset;
            display: flex;
            flex-direction: column;
            gap: spacing.s(2);
        }

        a {
            display: block;
            padding: spacing.s(3) spacing.s(4);
            color: unset;
            text-decoration: unset;
            @include theme.surface(true, false);
        }
    }

    > main {
        grid-area: main;
    }

    > footer {
        grid-area: footer;
        color: var(--color-fg-deemphasized);
    }
}

body.admin-pastes {
    main > ul {
        list-style: none;
        margin: unset;
        padding: unset;
        display: flex;
        flex-direction: column;
        gap: spacing.s(6);

        li {
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            grid-template-areas:
                "title buttons"
                "timestamp buttons"
                "content content";
            gap: spacing.s(4);

            .title {
                grid-area: title;
                @include theme.heading4(true);
                text-decoration: none;

                &:hover,
                &:focus-visible {
                    text-decoration: underline;
                }
            }

            time {
                grid-area: timestamp;
                color: var(--color-fg-deemphasized);
            }

            .action-buttons {
                grid-area: buttons;
                display: flex;
                justify-content: end;
                align-items: end;
                gap: spacing.s(2);

                button {
                    @include theme.button(true);
                }
            }

            .content {
                grid-area: content;
                @include theme.surface(false, true);
                padding: spacing.s(4);
                margin: unset;
            }
        }
    }
}