import styled from "styled-components";
export const StyledInfoBoxWrapper = styled.div.withConfig({
  displayName: "Styles__StyledInfoBoxWrapper",
  componentId: "sc-amgpyr-0"
})(["gap:4px;width:100%;border-radius:8px;padding-inline:16px;padding-block:12px;background-color:", ";border:1px solid ", ";position:relative;"], _ref => {
  let {
    $color,
    $opacity
  } = _ref;
  return $color + $opacity;
}, _ref2 => {
  let {
    $color
  } = _ref2;
  return $color;
});
StyledInfoBoxWrapper.displayName = "StyledInfoBoxWrapper";
export const StyledInfoBoxHeader = styled.div.withConfig({
  displayName: "Styles__StyledInfoBoxHeader",
  componentId: "sc-amgpyr-1"
})(["display:flex;width:100%;flex-direction:column;gap:", ";"], _ref3 => {
  let {
    $hasTitle
  } = _ref3;
  return $hasTitle ? "4px" : "none";
});
StyledInfoBoxHeader.displayName = "StyledInfoBoxHeader";
export const StyledInfoBoxContainer = styled.div.withConfig({
  displayName: "Styles__StyledInfoBoxContainer",
  componentId: "sc-amgpyr-2"
})(["display:flex;justify-items:space-between;width:100%;gap:8px;"]);
StyledInfoBoxContainer.displayName = "StyledInfoBoxContainer";
export const SyledInfoBoxInnerHeader = styled.div.withConfig({
  displayName: "Styles__SyledInfoBoxInnerHeader",
  componentId: "sc-amgpyr-3"
})(["display:flex;"]);
SyledInfoBoxInnerHeader.displayName = "SyledInfoBoxInnerHeader";
//# sourceMappingURL=Styles.js.map