import styled from "styled-components";
import { composeStyle as comp } from "../../util";
import { currentTheme } from "../../theme";
export const Wrapper = styled.div `
  position: relative;
  ${(props) => `width: ${props.theme.contentWidth};`}
  ${(props) => `padding: ${props.theme.wrapperPadding};`}
`;
export const Title = styled.div(({ theme: { titleFontFamily, titleFontSize, titleLineHeight, titleColor, titleColorMobile, titleFontSizeMobile, titleFontFamilyMobile, titleFontWeight, titleMargin, 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)}
  ${comp("margin", titleMargin)}

  @media (${mediaTablet}) {
    ${comp("font-family", titleFontFamilyMobile)}
    ${comp("font-size", titleFontSizeMobile)}
    ${comp("color", titleColorMobile)}
    ${comp("margin", titleMarginMobile)}
  }
`);
export const InnerTitle = styled.div(({ theme: { titleFontFamily, titleFontSize, titleLineHeight, titleFontWeight, titleMargin, innerTitleColor, innerTitleTop, innerTitleLeft, mediaTablet, }, }) => `
  position: absolute;
  ${comp("top", innerTitleTop)}
  ${comp("left", innerTitleLeft)}
  z-index: 9;
  ${comp("font-family", titleFontFamily)}
  ${comp("font-size", titleFontSize)}
  ${comp("line-height", titleLineHeight)}
  ${comp("color", innerTitleColor)}
  ${comp("font-weight", titleFontWeight)}
  ${comp("margin", titleMargin)}

  @media (${mediaTablet}) {
    display: none;
  }
`);
export const Content = styled.div(({ theme: { contentWidth, contentHeight, contentBorder, contentBorderError, contentPadding, contentMargin, contentBorderRadius, contentHeightMobile, contentWidthMobile, contentBorderMobile, contentPaddingMobile, mediaTablet, backgroundDisabled, }, error, disabled, isInnerTitle, }) => `
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: ${disabled ? "not-allowed" : "pointer"};

  * {
    cursor: ${disabled ? "not-allowed" : "pointer"};
  }

  ${comp("width", contentWidth)}
  ${comp("height", contentHeight)}
  ${comp("border", error ? contentBorderError : contentBorder)}
  ${comp("padding", contentPadding)}
  ${comp("margin", contentMargin)}
  ${comp("border-radius", contentBorderRadius)}
  ${comp("padding-top", isInnerTitle ? "16px" : "")}
  ${comp("background", disabled ? backgroundDisabled : "")}

  @media (${mediaTablet}) {
    width: auto;
    ${comp("width", contentWidthMobile)}
    ${comp("height", contentHeightMobile)}
    ${comp("border", contentBorderMobile)}
    ${comp("padding", contentPaddingMobile)}
  }
`);
export const Selected = styled.div `
  user-select: none;
  width: 100%;
`;
export const Modal = styled.div(({ fixedDropdownHeight, theme: { contentHeight, 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;
  left: 0px;
  background: white;
  box-sizing: border-box;
  margin-top: 1px;
  ${comp("width", modalWidth)}
  ${comp("padding", modalPadding)}
  ${comp("border", modalBorder)}
  ${comp("border-radius", modalBorderRadius)}

  ${fixedDropdownHeight
    ? `
      max-height: 210px;
      overflow-y: scroll;
      justify-content: flex-start;
      overflow-x: hidden;
      &::-webkit-scrollbar-track {
        border-radius: 4px;
      }

      &::-webkit-scrollbar {
        width: 3px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: ${currentTheme.colors.primary};
      }
  `
    : ``}

  @media (${mediaTablet}) {
    ${comp("top", modalTopMobile)}
  }
  `);
export const Option = styled.div(({ dark }) => `
  width: 100%;
  font-family: Medium;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 12px;
  cursor: pointer;
  :last-of-type {
    margin-bottom: unset;
  }
  color: ${currentTheme.colors?.text};
`);
export const Warning = styled.div(({ theme: { warningColor, warningFontSize, warningLineHeight, warningFontFamily, mediaTablet, }, }) => `
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  bottom: 0;
  left: 0;

  ${comp("font-family", warningFontFamily)}
  ${comp("font-size", warningFontSize)}
  ${comp("line-height", warningLineHeight)}
  ${comp("color", warningColor)}

  @media (${mediaTablet}) {
    justify-content: flex-end;
    margin-top: 4px;
    position: relative;
    bottom: unset;
    left: unset;
    white-space: unset;
    font-size: 10px;
  }
`);
export const Subscript = styled.div(({ theme: { subscriptColor, subscriptColorStrong, subscriptFontSize, subscriptLineHeight, subscriptFontFamily, mediaTablet, }, }) => `
  display: flex;
  justify-content: flex-start;
  z-index: 10;

  position: absolute;
  bottom: 0;
  left: 0;

  ${comp("font-family", subscriptFontFamily)}
  ${comp("font-size", subscriptFontSize)}
  ${comp("line-height", subscriptLineHeight)}
  ${comp("color", subscriptColor)}

  strong {
    text-decoration: underline;
    ${comp("color", subscriptColorStrong)}
  }

  @media (${mediaTablet}) {
    justify-content: flex-end;
    margin-top: 10px;
    position: relative;
    bottom: unset;
    left: unset;
  }
`);
//# sourceMappingURL=styled.js.map