import styled from "styled-components";
import { composeStyle as comp } from "../../util";
export const Wrapper = styled.div(({ theme: { wrapperMargin, mediaTablet, }, }) => `

  display: inline-block;
  position: relative;
  ${comp("margin", wrapperMargin)}
  z-index: 150;

  @media (${mediaTablet}) {
    z-index: 110;
  }
`);
export const Content = styled.div(({ theme: { contentWidth, contentHeight, contentPadding, contentBackground, contentBoxShadow, contentBorderRadius, contentBottom, contentLeft, mediaTablet, }, visible, warning, }) => `

  width: auto;
  ${comp("min-width", contentWidth)}
  ${comp("min-height", contentHeight)}

  ${comp("display", visible ? "block" : "none")}

  ${comp("padding", contentPadding)}
  ${comp("background", contentBackground)}
  ${comp("box-shadow", contentBoxShadow)}
  ${comp("border-radius", contentBorderRadius)}

  position: absolute;
  ${comp("bottom", contentBottom)}
  ${comp("left", contentLeft)}


  ::before {
    ${comp("display", warning ? "block" : "none")}

    content: "";
    position: absolute;
    right: 0px;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 2px;

    background: #ff7979;
    box-shadow: 4px 4px 24px rgba(179, 189, 199, 0.04);
    border-radius: 4px;

  }

  ::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: -1px;

    width: 22px;
    height: 22px;

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATCAYAAACZZ43PAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACfSURBVHgBpZRRDYAwDEQ7FCBhFnCABCQgAQfgAFCAFCQgYThAQmlDRgiw0ZWX3GdfjssCIGJOsaCFj/GgV4kuAsZR6pT7u8AzidsEBMxGaf8Irp9lQ/cZfGMpLjiyoAFGR04UeKazjVLg21jJBm+MlMIYs6Y2WCilZgN+E91rF4FgxtirjAgcpYIvAoKBkoOEm2B+jCQU8EgNaMCff6Qdo5gUVgEP1mgAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-size: contain;

  }

  @media (${mediaTablet}) {

    position: fixed;
    left: 0;
    right: 0;
    bottom: unset;
    top: 0;
    min-width: 100%;
    padding: 25px;
    ::after {
      display: none;
    }
  }
`);
export const Icon = styled.div(({ theme: { iconWidth, iconHeight, iconBorder, iconBorderWarning, iconBackground, }, warning, }) => `


  display: flex;
  align-items: center;
  justify-content: center;

  ${comp("width", iconWidth)}
  ${comp("height", iconHeight)}

  ${comp("background", iconBackground)}

  ${comp("border", warning ? iconBorderWarning : iconBorder)}
  border-radius: 50%;
  box-sizing: border-box;

  cursor: pointer;
`);
//# sourceMappingURL=styled.js.map