import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { component, mergeConfig } from "../../engines";
import { addFocus } from "../../mixins";
import { linkConfig } from "../Link";
import { IconDisclosureRight } from "../_Icon";
import { tokens as linkTokens } from "../Link/Link.tokens";
import { tokens } from "./Breadcrumbs.tokens";
const mergedLinkConfig = mergeConfig(linkConfig);
const Link = component(mergedLinkConfig);
export const StyledLink = /*#__PURE__*/ styled(Link, {
    target: "evcym8y0",
    label: "StyledLink"
})("--plasma__private-color:", ({ isHref })=>isHref ? `var(${tokens.breadcrumbsColor})` : `var(${tokens.breadcrumbsColorText})`, ";", linkTokens.linkColor, ":var(--plasma__private-color);", linkTokens.linkColorHover, ":var(--plasma__private-color);", linkTokens.linkColorActive, ":var(--plasma__private-color);", linkTokens.linkDisabledOpacity, ":var(", tokens.breadcrumbsOpacity, ");opacity:", ({ isHref })=>isHref ? 1 : `var(${tokens.breadcrumbsOpacity})`, ";outline:none;cursor:pointer;", addFocus({
    outlineOffset: '0.125rem',
    outlineSize: '0.125rem',
    outlineRadius: '0rem',
    outlineColor: `var(${tokens.breadcrumbsFocusOutlineColor})`,
    hasTransition: false
}));
export const base = /*#__PURE__*/ css("display:flex;flex-direction:row;align-items:center;gap:var(", tokens.breadcrumbsGap, ");color:var(", tokens.breadcrumbsColor, ");font-family:var(", tokens.breadcrumbsFontFamily, ");font-size:var(", tokens.breadcrumbsFontSize, ");font-weight:var(", tokens.breadcrumbsFontWeight, ");font-style:var(", tokens.breadcrumbsFontStyle, ");letter-spacing:var(", tokens.breadcrumbsLetterSpacing, ");line-height:var(", tokens.breadcrumbsLineHeight, ");", "base");
export const Separator = /*#__PURE__*/ styled(IconDisclosureRight, {
    target: "evcym8y1",
    label: "Separator"
})("color:var(", tokens.breadcrumbsColorSeparator, ");opacity:var(", tokens.breadcrumbsOpacity, ");");
