import styled, { css } from "styled-components";
import { classes, tokens } from "./NavigationDrawer.tokens";
export const base = css([
    `display:flex;box-sizing:border-box;height:100%;width:100%;position:relative;.`,
    `{background:var(`,
    `);}.`,
    `{text-decoration:none;color:var(--text-primary);&:visited,&:hover,&:visited:hover{color:var(--text-primary);}}.`,
    `{padding:var(`,
    `);display:flex;gap:var(`,
    `);align-items:center;cursor:pointer;border-radius:var(`,
    `);box-sizing:border-box;height:var(`,
    `);min-width:var(`,
    `);line-height:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);&:hover{background:var(`,
    `);}}.`,
    `{cursor:not-allowed;opacity:var(`,
    `);}.`,
    `{justify-content:space-between;align-items:center;}.`,
    `{gap:var(`,
    `);padding:var(`,
    `);.`,
    `{position:absolute;top:0;right:0;}.`,
    `{position:absolute;top:-0.25rem;right:-0.25rem;}}.`,
    `{position:absolute;top:-0.375rem;right:-0.375rem;}.`,
    `{position:absolute;top:-0.625rem;right:-0.625rem;}.`,
    `{width:100%;display:flex;flex-direction:column;overflow-y:auto;box-sizing:content-box;color:var(--text-primary);height:calc(100% - 2rem);padding:var(`,
    `);min-width:var(`,
    `);max-width:var(`,
    `);box-shadow:var(`,
    `);background:var(`,
    `);&::-webkit-scrollbar{width:0.188rem;}&::-webkit-scrollbar-thumb{background-color:var(--surface-transparent-tertiary);background-clip:content-box;border:0.063rem solid transparent;border-radius:1rem;}&::-webkit-scrollbar-track{background-color:var(--surface-transparent-primary);background-clip:content-box;border:0.063rem solid transparent;border-radius:1rem;}}.`,
    `{min-width:var(`,
    `);max-width:var(`,
    `);}.`,
    `{position:fixed;top:0;left:0;z-index:1;}.`,
    `{margin-left:calc(var(`,
    `) + 1.5rem);}.`,
    `{transform:rotate(-180deg);}`
], classes.navigationDrawerMenuItemSelected, tokens.menuItemSelectedColor, classes.navigationDrawerMenuLink, classes.navigationDrawerMenuItem, tokens.menuItemPadding, tokens.menuItemGap, tokens.menuItemBorderRadius, tokens.sidebarWidthClosed, tokens.sidebarWidthClosed, tokens.iconContainerSize, tokens.menuItemFontFamily, tokens.menuItemFontSize, tokens.menuItemFontStyle, tokens.menuItemFontWeight, tokens.menuItemFontLetterSpacing, tokens.menuItemFontLineHeight, tokens.menuItemHoverColor, classes.navigationDrawerMenuItemDisabled, tokens.menuItemDisabledOpacity, classes.navigationDrawerMenuItemWithoutContentLeft, classes.navigationDrawerMenuItemContentLeft, tokens.menuItemContentLeftMargin, tokens.menuItemContentLeftMargin, classes.navigationDrawerMenuIndicator, classes.navigationDrawerMenuCounter, classes.navigationDrawerMenuIndicator, classes.navigationDrawerMenuCounter, classes.navigationDrawerSidebar, tokens.sidebarPadding, tokens.sidebarWidth, tokens.sidebarWidth, tokens.sidebarBoxShadow, tokens.sidebarBackground, classes.navigationDrawerSidebarClosed, tokens.sidebarWidthClosed, tokens.sidebarWidthClosed, classes.navigationDrawerSidebarOverlay, classes.navigationDrawerContentOverlay, tokens.sidebarWidthClosed, classes.navigationDrawerArrowInverse);
export const Content = styled.div.withConfig({
    displayName: "NavigationDrawer.styles__Content",
    componentId: "sc-28f236f2-0"
})([
    `width:100%;height:100%;`
]);
export const Overlay = styled.div.withConfig({
    displayName: "NavigationDrawer.styles__Overlay",
    componentId: "sc-28f236f2-1"
})([
    `position:absolute;top:0;right:0;left:calc(var(`,
    `) + 1.5rem);bottom:0;z-index:1;background-color:var(`,
    `);cursor:pointer;`
], tokens.sidebarWidth, tokens.overlayBackground);
export const Footer = styled.div.withConfig({
    displayName: "NavigationDrawer.styles__Footer",
    componentId: "sc-28f236f2-2"
})([
    `margin-top:auto;`
]);
