import o, { css as e } from "styled-components";
import { getColorAlias as i, getFontSize as f, convertToTransientProps as s, getSpacing as a } from "../../utils/index.js";
import h from "../../icons/Close.js";
const l = (t = "right", d = !1, n = !1, r = "25%") => d && n ? t === "right" ? e`
        width: ${r};
        right: 0;
        bottom: 0;
      ` : e`
      width: ${r};
      left: 0;
      bottom: 0;
    ` : t === "right" ? e`
      top: 0;
      right: 0;
      transform: translateX(${n ? "0" : "100%"});
    ` : e`
    top: 0;
    left: -${r};
    transform: translateX(${n ? "100%" : "0"});
  `, m = o.div.withConfig({
  shouldForwardProp: s([
    "isOpen",
    "fixed",
    "orientation",
    "width"
  ])
})`
  height: 100vh;
  background: ${i("containerDefault")};
  color: ${i("contentDefault")};
  position: fixed;
  z-index: 1200;
  width: ${(t) => t.width};
  ${(t) => l(t.orientation, t.fixed, t.isOpen, t.width)}
  transition: ${({ theme: t }) => `all ${t.motion.speed.defaultS} ${t.motion.easing.easeDefault}`};
  box-shadow: ${(t) => t.theme.elevation.e2};
  font-family: ${(t) => t.theme.font.familyPrimary};
  font-size: ${f("size16")};
`, $ = o.div.withConfig({
  shouldForwardProp: s(["customContent"])
})`
  ${(t) => t.customContent ? e`
          padding: ${a("s00", "s00")};
        ` : e`
          padding: ${a("s00", "s04")};
        `};
`, u = o.div`
  width: 100%;
  height: 80px;
  font-family: ${(t) => t.theme.font.familyPrimary};
  font-weight: ${(t) => t.theme.font.weightBold};
  display: flex;
  justify-content: space-between;
  align-items: center;
`, w = o.div``, x = o.div`
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: ${i("backgroundDark")};
  opacity: 0.5;
  z-index: 100;
  top: 0;
  right: 0;
`, y = o(h)`
  fill: ${i("contentDefault")};
  cursor: pointer;
  padding-bottom: 4px;
  width: 25px;
  height: 25px;
`;
export {
  x as BackDrop,
  y as CloseButton,
  u as HeaderWrapper,
  m as SideSheetContainer,
  $ as SideSheetContentWrapper,
  w as TitleWrapper
};
