import styled from "styled-components";
import { Severity } from "../../contexts/notifications";
import { composeStyle as comp } from "../../util";
export const Wrapper = styled.div(({ theme: { mediaMobile, wrapperTop, wrapperBottom, wrapperLeft, wrapperRight, wrapperTopMobile, wrapperBottomMobile, wrapperLeftMobile, wrapperRightMobile, zIndex, }, }) => `

  position: fixed;
  display: flex;
  flex-flow: column-reverse nowrap;
  ${comp("z-index", zIndex ?? "150")}
  ${comp("top", wrapperTop)}
  ${comp("bottom", wrapperBottom)}
  ${comp("left", wrapperLeft)}
  ${comp("right", wrapperRight)}
  max-height: calc(100vh - ${wrapperTop});

  @media (${mediaMobile}) {
    ${comp("top", wrapperTopMobile)}
    ${comp("bottom", wrapperBottomMobile)}
    ${comp("left", wrapperLeftMobile)}
    ${comp("right", wrapperRightMobile)}
  }
`);
export const Item = styled.div(({ theme: { mediaMobile, colorError, itemPosition, itemBackground, itemBackgroundError, itemPadding, itemMinHeight, itemMinHeightMobile, itemMaxWidth, itemWidth, itemTop, itemBottom, itemLeft, itemRight, itemMarginBottom, itemBorder, }, severity, }) => `
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: 0.2s;
    border-radius: 4px;
    z-index: 22;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s linear;

    ${comp("position", itemPosition)}
    ${comp("background", itemBackground)}
    ${comp("padding", itemPadding)}
    ${comp("min-height", itemMinHeight)}
    ${comp("max-width", itemMaxWidth)}
    ${comp("width", itemWidth)}
    ${comp("top", itemTop)}
    ${comp("bottom", itemBottom)}
    ${comp("left", itemLeft)}
    ${comp("right", itemRight)}
    ${comp("margin-bottom", itemMarginBottom)}
    ${comp("border", itemBorder)}

    @media (${mediaMobile}) {
      width: 100vw;
      top: 0;
      left: 0;
      right: 0;
      bottom: unset;
      margin-bottom: 5px;
      max-width: unset;
      border-radius: unset;
      ${comp("min-height", itemMinHeightMobile)}
    }

    ${severity === Severity.Error
    ? `{
      ${comp("background", itemBackgroundError)}
      p {
        ${comp("color", colorError)}
      }
      button svg {
        rect {
          fill: #FFFFFF;
        }
      }
    }`
    : ""}
    &.hidden {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 0.4s, opacity 0.4s linear;
    }
`);
export const Text = styled.div(({ theme: { mediaMobile, color, textFontFamily, textFontSize, textLineHeight, textMaxWidth, textMaxWidthMobile, }, }) => `
  margin: 0;
  font-weight: 600;
  width: 100%;
  ${comp("color", color)}
  ${comp("font-family", textFontFamily)}
  ${comp("font-size", textFontSize)}
  ${comp("line-height", textLineHeight)}
  ${comp("max-width", textMaxWidth)}

  @media (${mediaMobile}) {
    ${comp("max-width", textMaxWidthMobile)}
    }
  `);
export const CloseBtn = styled.button(({ theme: {} }) => `
  width: 38px;
  height: 32px;

  padding: 0;

  background: none;
  border: none;

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

  position: absolute;
  right: 0px;
  top: 0px;

  cursor: pointer;

  :focus {
    outline: none;
  }
  `);
export const Link = styled.div(({ theme: { colorLink, linkTextFontFamily, linkTextFontSize } }) => `
  margin-top: 4px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  ${comp("color", colorLink)}
  ${comp("font-family", linkTextFontFamily)}
  ${comp("font-size", linkTextFontSize)}
  `);
//# sourceMappingURL=styled.js.map