@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

body {
    --theme-background: #f0f0f0;
    --theme-background-darker: #e0e0e0;
    --theme-foreground: #202020;
    --theme-floating: #f0f0f0;

    background-color: var(--theme-background);
    color: var(--theme-foreground);
}

@utility bg-theme {
    background-color: var(--theme-background);
}

@utility bg-theme-darker {
    background-color: var(--theme-background-darker);
}

@utility bg-theme-floating {
    background-color: var(--theme-floating);
}

@utility text-color-theme {
    color: var(--theme-foreground);
}

@utility btn {
    @apply px-2 py-1 cursor-pointer;
}

.btn-generic {
    @apply bg-gray-400/40 hover:bg-gray-300/40 dark:hover:bg-gray-500/40 rounded transition-colors;
}

.generic-select {
    @apply border py-1 px-2 rounded;
}

.hljs {
    @apply rounded;
}

.printarea {
    visibility: hidden;
    display: none;

    code {
        text-wrap: wrap;
    }
}

img {
    display: inline-block;
    margin: 0;
}

.top-menu-button {
    @apply hover:bg-gray-300/40 dark:hover:bg-gray-500/40 btn rounded transition-colors flex-1 text-left;
}

.max-h-half {
    max-height: calc(50vh - 32px);
}

@utility h-screen-trimmed {
    height: calc(100vh - 64px);
}

@utility max-h-screen-trimmed {
    max-height: calc(100vh - 64px);
}

@media print {
    body {
        visibility: hidden;
    }

    .printarea {
        display: block;
        visibility: visible;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}