/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 72.22% 50.59%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 240 5% 64.9%;
        --radius: 0.5rem;

        --ng-doc-code-background: theme('colors.zinc.950');
        --ng-doc-sidebar-background: hsl(var(--background));
        --ng-doc-navbar-background: hsl(var(--background));
        --ng-doc-demo-displayer-background: hsl(var(--background));
        --ng-doc-demo-displayer-border: 1px solid hsl(var(--border));
    }

    .dark {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;
        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 85.7% 97.3%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 240 4.9% 83.9%;

        --ng-doc-code-background: theme('colors.zinc.900');
        --ng-doc-sidebar-background: hsl(var(--background));
        --ng-doc-navbar-background: hsl(var(--background));
        --ng-doc-demo-displayer-background: hsl(var(--background));
        --ng-doc-demo-displayer-border: 1px solid hsl(var(--border));
    }
}

@layer base {
    * {
        //@apply border-border;
        box-sizing: border-box;
        border: 0 solid hsl(var(--border));
    }

    html {
        @apply scroll-smooth;
        background-color: var(--background);
    }

    body {
        @apply bg-background text-foreground;
        height: unset;
        min-height: 100vh;
        font-synthesis-weight: none;
        text-rendering: optimizeLegibility;
    }

    [type='button'],
    [type='reset'],
    [type='submit'],
    button {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none;
        cursor: pointer;

        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
    }

    a {
        color: inherit;
        text-decoration: inherit;
    }

    menu,
    ol,
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    blockquote,
    dd,
    dl,
    figure,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    p,
    pre {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }

    ng-doc-sidenav {
        @apply lg:container;
    }
}

.ng-doc-demo {
    display: flex;
    min-height: 350px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ng-doc-demo > ng-component {
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2.5rem;
}

strong.ngde {
    color: hsl(var(--muted-foreground));
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
}

ng-doc-dot {
    visibility: hidden;
}

ng-doc-sidebar-item .ng-doc-text {
    color: hsl(var(--muted-foreground));
}

ng-doc-sidebar-item .ng-doc-sidebar-link.active .ng-doc-text {
    color: hsl(var(--foreground));
}

ng-doc-page .ng-doc-page-wrapper > h1 {
    @apply scroll-m-20 text-4xl font-bold tracking-tight;
}

ng-doc-page .ng-doc-page-wrapper > h2 {
    @apply font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0;
}

ng-doc-page .ng-doc-page-wrapper > h3 {
    @apply font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight;
}

ng-doc-search {
    display: none;
}

.ng-doc-navbar-center {
    padding: 0 !important;
}

.ng-doc-menu {
    margin-left: 4px !important;
}
