import { counterConfig, counterTokens } from "../../../Counter";
import styled from "styled-components";
import { component, mergeConfig } from "../../../../engines";
import { indicatorTokens, indicatorConfig } from "../../../Indicator";
import { linkConfig } from "../../../Link";
import { applyEllipsis } from "../../../../mixins";
import { tokens } from "../../NavigationDrawer.tokens";
const mergedCounterConfig = mergeConfig(counterConfig);
const Counter = component(mergedCounterConfig);
const indicatorMergedConfig = mergeConfig(indicatorConfig);
const Indicator = component(indicatorMergedConfig);
const mergedLinkConfig = mergeConfig(linkConfig);
export const Link = component(mergedLinkConfig);
export const ExtraCounter = styled(Counter).withConfig({
    displayName: "MenuItem.styles__ExtraCounter",
    componentId: "sc-cab235d0-0"
})([
    `margin:auto;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], counterTokens.background, tokens.counterBackground, counterTokens.color, tokens.counterColor, counterTokens.borderRadius, tokens.counterBorderRadius, counterTokens.height, tokens.counterHeight, counterTokens.padding, tokens.counterPadding, counterTokens.fontFamily, tokens.counterFontFamily, counterTokens.fontSize, tokens.counterFontSize, counterTokens.fontStyle, tokens.counterFontStyle, counterTokens.fontWeight, tokens.counterFontWeight, counterTokens.letterSpacing, tokens.counterLetterSpacing, counterTokens.lineHeight, tokens.counterLineHeight);
export const StyledIndicator = styled(Indicator).withConfig({
    displayName: "MenuItem.styles__StyledIndicator",
    componentId: "sc-cab235d0-1"
})([
    `margin:auto;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], indicatorTokens.size, tokens.menuItemIndicatorSize, indicatorTokens.color, tokens.menuItemIndicatorColor);
export const IconWrapper = styled.div.withConfig({
    displayName: "MenuItem.styles__IconWrapper",
    componentId: "sc-cab235d0-2"
})([
    `position:relative;width:var(`,
    `);height:var(`,
    `);`
], tokens.iconContainerSize, tokens.iconContainerSize);
export const Icon = styled.div.withConfig({
    displayName: "MenuItem.styles__Icon",
    componentId: "sc-cab235d0-3"
})([
    `margin:var(`,
    `);div{width:var(`,
    `);height:var(`,
    `);}`
], tokens.iconMargin, tokens.iconSize, tokens.iconSize);
export const ContentLeftWrapper = styled.div.withConfig({
    displayName: "MenuItem.styles__ContentLeftWrapper",
    componentId: "sc-cab235d0-4"
})([
    `position:relative;width:var(`,
    `);height:var(`,
    `);`
], tokens.menuItemContentLeftSize, tokens.menuItemContentLeftSize);
export const RightContentWrapper = styled.div.withConfig({
    displayName: "MenuItem.styles__RightContentWrapper",
    componentId: "sc-cab235d0-5"
})([
    `position:relative;height:var(`,
    `);display:flex;`
], tokens.iconContainerSize);
export const Label = styled.span.withConfig({
    displayName: "MenuItem.styles__Label",
    componentId: "sc-cab235d0-6"
})([
    ``,
    `;`
], applyEllipsis());
