import styled from "styled-components";
import { composeStyle as comp } from "../../util";
export const Wrapper = styled.div(({ theme: { wrapperWidth, wrapperHeight, wrapperBorder, wrapperPadding, wrapperMargin, wrapperBorderRadius, wrapperHeightMobile, wrapperWidthMobile, wrapperBorderMobile, wrapperPaddingMobile, mediaTablet, }, }) => `
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;

  .ui-dropdown__selected {
    z-index: 11;
  }
  ${comp("width", wrapperWidth)}
  ${comp("height", wrapperHeight)}
  ${comp("border", wrapperBorder)}
  ${comp("padding", wrapperPadding)}
  ${comp("margin", wrapperMargin)}
  ${comp("border-radius", wrapperBorderRadius)}


  @media (${mediaTablet}) {
    width: auto;
    ${comp("width", wrapperWidthMobile)}
    ${comp("height", wrapperHeightMobile)}
    ${comp("border", wrapperBorderMobile)}
    ${comp("padding", wrapperPaddingMobile)}
  }
`);
export const Modal = styled.div(({ theme: { wrapperHeight, modalWidth, modalPadding, modalBorder, modalBorderRadius, modalTopMobile, mediaTablet, }, }) => `
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  z-index: 100;
  right: 0px;
  background: white;
  ${comp("top", wrapperHeight)}
  ${comp("width", modalWidth)}
  ${comp("padding", modalPadding)}
  ${comp("border", modalBorder)}
  ${comp("border-radius", modalBorderRadius)}

  @media (${mediaTablet}) {
    ${comp("top", modalTopMobile)}
  }

  `);
export const Title = styled.div(({ theme: { titleFontFamily, titleFontSize, titleLineHeight, titleColor, titleColorMobile, titleFontSizeMobile, titleFontFamilyMobile, titleFontWeight, titleMarginMobile, mediaTablet, }, }) => `
  position: relative;
  z-index: 9;
  ${comp("font-family", titleFontFamily)}
  ${comp("font-size", titleFontSize)}
  ${comp("line-height", titleLineHeight)}
  ${comp("color", titleColor)}
  ${comp("font-weight", titleFontWeight)}

  @media (${mediaTablet}) {
    ${comp("font-family", titleFontFamilyMobile)}
    ${comp("font-size", titleFontSizeMobile)}
    ${comp("color", titleColorMobile)}
    ${comp("margin", titleMarginMobile)}
  }
`);
//# sourceMappingURL=styled.js.map