@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
@import './themes.css';

@tailwind base;

@layer base {
  html {
    @apply text-surface;
    @apply bg-white;
  }
  html.dark {
    @apply text-neutral-50;
    @apply bg-body-dark;
  }
}

@tailwind components;
@tailwind utilities;

p {
  @apply leading-[1.6];
}

[x-cloak] {
    display: none;
}

/* Sidebar Layout - Main Content Offset */
.main-content-sidebar-offset {
    margin-left: 16rem; /* 256px - w-64 */
    transition: margin-left 300ms ease-in-out;
}

.main-content-sidebar-offset.collapsed {
    margin-left: 5rem; /* 80px - w-20 */
}

/* Tighten content width when sidebar is collapsed */
.main-content-sidebar-offset.collapsed > header,
.main-content-sidebar-offset.collapsed > main {
    max-width: 100%;
}

/* Reduce horizontal padding when collapsed */
.main-content-sidebar-offset.collapsed > header > div,
.main-content-sidebar-offset.collapsed > main {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Show header brand only when sidebar is collapsed */
.main-content-sidebar-offset .collapsed-header-brand {
    display: none;
}

.main-content-sidebar-offset.collapsed .collapsed-header-brand {
    display: flex;
}

/* Remove centered max-width wrappers when collapsed */
.main-content-sidebar-offset.collapsed .container,
.main-content-sidebar-offset.collapsed .max-w-7xl,
.main-content-sidebar-offset.collapsed .max-w-6xl,
.main-content-sidebar-offset.collapsed .max-w-5xl,
.main-content-sidebar-offset.collapsed .max-w-4xl,
.main-content-sidebar-offset.collapsed .max-w-3xl,
.main-content-sidebar-offset.collapsed .max-w-2xl,
.main-content-sidebar-offset.collapsed .max-w-xl,
.main-content-sidebar-offset.collapsed .max-w-lg,
.main-content-sidebar-offset.collapsed .max-w-md,
.main-content-sidebar-offset.collapsed .max-w-sm,
.main-content-sidebar-offset.collapsed .max-w-xs {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}