import r, { css as o } from "styled-components";
import "../../_virtual/jsx-runtime.js";
import c from "../../icons/ChevronLeft.js";
import s from "../../icons/ChevronRight.js";
import { getColorAlias as e, getFontSize as i, getSpacing as n } from "../../utils/index.js";
const l = r.button`
  align-items: center;
  background: transparent;
  border: none;
  color: ${e("contentDefault")};
  display: flex;
  height: 100%;
  padding: 0;
  ${i("size16")};
  cursor: ${(t) => t.onClick || t.href ? "pointer" : "default"};
  font-weight: ${(t) => t.theme.font.weightBold};
  text-decoration: ${(t) => t.href ? "none" : "initial"};
`, d = r(s)`
  fill: ${e("contentDefault")};
  margin: ${n("s00", "s01")};
  width: 12px;
`, f = r(c)`
  fill: ${e("contentDefault")};
  margin: ${n("s00", "s01")};
  width: 14px;
`, u = r.span`
  color: ${e("contentDefault")};
  height: 100%;
  ${i("size16")};
  text-decoration: none;
`, b = r.nav`
  display: flex;
  cursor: ${(t) => t.onClick ? "pointer" : "default"};
  flex-flow: row nowrap;
  align-items: center;
  width: fit-content;

  ${(t) => {
  switch (t.variant) {
    case "back":
      return o`
          padding: ${n("s01", "s03", "s01", "s02")};
        `;
    case "default":
    default:
      return o`
          padding: ${n("s01", "s04")};
        `;
  }
}}

  ${(t) => t.scrim && o`
      background: ${e("overlay")};
      border-radius: ${(a) => a.theme.radius.roundedD};

      ${l}, ${u} {
        color: ${e("contentLinkLight")};
      }

      ${d}, ${f} {
        fill: ${e("contentLight")};
      }
    `}
`;
export {
  f as BreadcrumbBackChevron,
  d as BreadcrumbChevron,
  u as BreadcrumbCurrentPage,
  l as BreadcrumbItem,
  b as BreadcrumbWrapper
};
