import styled from "styled-components";
import { propOrElse, getColor } from "../../theme/utils";
var LEFT = 2;
var RIGHT = -2;
export var ComponentBox = styled.div.withConfig({
  displayName: "styled__ComponentBox",
  componentId: "sc-gh7act-0"
})(["display:flex;flex-direction:", ";top:0;bottom:0;height:100vh;width:100vw;"], function (_ref) {
  var isRight = _ref.isRight;
  return isRight ? "row-reverse" : "row";
});
export var SidebarBox = styled.aside.withConfig({
  displayName: "styled__SidebarBox",
  componentId: "sc-gh7act-1"
})(["overflow:hidden;top:0;bottom:0;height:100%;width:50%;"]);
export var DisabledOverlay = styled.aside.withConfig({
  displayName: "styled__DisabledOverlay",
  componentId: "sc-gh7act-2"
})(["position:fixed;top:0;bottom:0;left:0;height:100vh;width:100vw;min-width:100vw;max-width:100vw;background-color:black;opacity:0.3;z-index:15;"]);
export var PortalSidebox = styled.aside.withConfig({
  displayName: "styled__PortalSidebox",
  componentId: "sc-gh7act-3"
})(["position:fixed;overflow:hidden;top:0;", ":0;bottom:0;height:100vh;width:50vw;box-shadow:0px ", "px 68px rgba(0,0,0,0.288);"], propOrElse(["side"], "left"), propOrElse(["shadowSide"], true) ? LEFT : RIGHT);
export var InfoBox = styled.div.withConfig({
  displayName: "styled__InfoBox",
  componentId: "sc-gh7act-4"
})(["display:flex;width:50%;background-color:", ";box-shadow:inset 0px ", "px 68px rgba(0,0,0,0.288);"], getColor("primary"), propOrElse(["shadowSide"], true) ? LEFT : RIGHT);