import styled from "styled-components";
import { IconDisclosureDownCentered } from "../../../_Icon";
import { applyEllipsis } from "../../../../mixins";
import { tokens } from "../../NavigationDrawer.tokens";
export const StyledSection = styled.div.withConfig({
    displayName: "Section.styles__StyledSection",
    componentId: "sc-c179f8d5-0"
})([
    `display:flex;flex-direction:column;`
]);
export const SectionHeader = styled.div.withConfig({
    displayName: "Section.styles__SectionHeader",
    componentId: "sc-c179f8d5-1"
})([
    `display:flex;flex-direction:row;padding:var(`,
    `);gap:var(`,
    `);align-items:center;cursor:pointer;box-sizing:border-box;height:var(`,
    `);min-width:var(`,
    `);color:var(`,
    `);font-size:var(`,
    `);font-family:var(--plasma-typo-body-s-font-family);font-style:var(--plasma-typo-text-s-font-style);font-weight:var(--plasma-typo-text-s-font-weight);line-height:var(--plasma-typo-text-s-line-height);letter-spacing:var(--plasma-typo-text-s-letter-spacing);border-radius:var(`,
    `);user-select:none;`
], tokens.sectionPadding, tokens.sectionHeaderGap, tokens.sidebarWidthClosed, tokens.sidebarWidthClosed, tokens.sectionColor, tokens.sectionFontSize, tokens.sectionBorderRadius);
export const SectionDivider = styled.div.withConfig({
    displayName: "Section.styles__SectionDivider",
    componentId: "sc-c179f8d5-2"
})([
    `height:var(`,
    `);background:var(`,
    `);margin:10px 0;`
], tokens.dividerHeight, tokens.dividerColor);
export const SectionIcon = styled.div.withConfig({
    displayName: "Section.styles__SectionIcon",
    componentId: "sc-c179f8d5-3"
})([
    `width:var(`,
    `);min-width:var(`,
    `);height:var(`,
    `);display:flex;div{width:var(`,
    `);height:var(`,
    `);}`
], tokens.iconContainerSize, tokens.iconContainerSize, tokens.iconContainerSize, tokens.iconSize, tokens.iconSize);
export const ArrowIcon = styled(IconDisclosureDownCentered).withConfig({
    displayName: "Section.styles__ArrowIcon",
    componentId: "sc-c179f8d5-4"
})([
    `margin:auto;`
]);
export const Label = styled.span.withConfig({
    displayName: "Section.styles__Label",
    componentId: "sc-c179f8d5-5"
})([
    ``,
    `;`
], applyEllipsis());
