import styled from "styled-components";
import { composeStyle as comp } from "../../util";
export const Wrapper = styled.div(({ theme: { wrapperMargin, wrapperPadding, wrapperPaddingMobile, wrapperWidth, wrapperWidthMobile, wrapperMinHeightMobile, mediaTablet, }, disabled, }) => `
  ${comp("margin", wrapperMargin)}
  ${comp("padding", wrapperPadding)}
  ${comp("width", wrapperWidth)}

  ${disabled ? "background: transparent;" : ""}
  position: relative;

  @media (${mediaTablet}) {
    ${comp("width", wrapperWidthMobile)}
    ${comp("min-height", wrapperMinHeightMobile)}
    ${comp("padding", wrapperPaddingMobile)}
  }
`);
export const Title = styled.div(({ theme: { titleFontFamily, titleFontSize, titleLineHeight, titleColor, titleColorMobile, titleFontSizeMobile, titleFontFamilyMobile, titleFontWeight, titleMarginMobile, mediaTablet, }, }) => `
  position: relative;
  z-index: 10;
  ${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)}
  }
`);
export const InnerTitle = styled.div(({ theme: { titleFontFamily, titleFontSize, titleLineHeight, titleColorMobile, titleFontSizeMobile, titleFontFamilyMobile, titleFontWeight, titleMarginMobile, innerTitleColor, innerTitleLeft, innerTitleTop, mediaTablet, }, }) => `
  position: absolute;
  ${comp("top", innerTitleTop)}
  ${comp("left", innerTitleLeft)}
  z-index: 10;
  ${comp("font-family", titleFontFamily)}
  ${comp("font-size", titleFontSize)}
  ${comp("line-height", titleLineHeight)}
  ${comp("color", innerTitleColor)}
  ${comp("font-weight", titleFontWeight)}

  @media (${mediaTablet}) {
    display: none;
  }
`);
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;
  }
`);
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 Input = styled.input(({ theme: { inputFontSize, inputLineHeight, inputFontFamily, inputColor, inputDisabledColor, inputPlaceholderColor, inputFontSizeMobile, mediaTablet, }, }) => `
  border: none;
  outline: none;
  width: 100%;
  padding-top: 4px;
  background: transparent;
  -moz-appearance: textfield;
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  ${comp("font-family", inputFontFamily)}
  ${comp("font-size", inputFontSize)}
  ${comp("line-height", inputLineHeight)}
  ${comp("color", inputColor)}

  &:disabled {
    ${comp("color", inputPlaceholderColor)}
  }
  ::placeholder {
    ${comp("color", inputPlaceholderColor)}
  }
  ::-webkit-input-placeholder {
    ${comp("color", inputPlaceholderColor)}
  }
  ::-moz-placeholder {
    ${comp("color", inputPlaceholderColor)}
  }
  :-moz-placeholder {
    ${comp("color", inputPlaceholderColor)}
  }
  ::-ms-input-placeholder {
    ${comp("color", inputPlaceholderColor)}
  }
  :-ms-input-placeholder {
    ${comp("color", inputPlaceholderColor)}
  }

  @media (${mediaTablet}) {
    ${comp("font-size", inputFontSizeMobile)}
  }

  &:disabled {
    ${comp("color", inputDisabledColor)}
  }
`);
export const Content = styled.div(({ theme: { inputBorder, inputBorderError, inputBorderRadius, inputHeight, inputWidth, inputPadding, inputPaddingMobile, inputMargin, inputMarginMobile, inputHeightMobile, mediaTablet, }, isError, isInnerTitle, }) => `
  position: relative;
  z-index: 9;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  background: white;
  ${comp("border", isError ? inputBorderError : inputBorder)}
  ${comp("border-radius", inputBorderRadius)}
  ${comp("height", inputHeight)}
  ${comp("width", inputWidth)}
  ${comp("padding", inputPadding)}
  ${comp("margin", inputMargin)}

  transition: 0.3s;

  .copy-icon {
    cursor: pointer;
    position: absolute;
    top: 22px;
    right: 22px;
  }

  .download-icon {
    cursor: pointer;
    position: absolute;
    top: 22px;
    right: 22px;
  }

  .ui-input__clear {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-5px);
  }

  ${comp("padding-top", isInnerTitle ? "16px" : "4px")}

  @media (${mediaTablet}) {
    ${comp("margin", inputMarginMobile)}
    ${comp("height", inputHeightMobile)}
    ${comp("padding", inputPaddingMobile)}
    flex-direction: row-reverse;
  }
`);
export const Icon = styled.div(({ theme: { inputFontSize, inputLineHeight, inputFontFamily, inputColor, mediaTablet, }, }) => `
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 21px;

  > span {
    margin-left: 12px;
    ${comp("font-family", inputFontFamily)}
    ${comp("font-size", inputFontSize)}
    ${comp("line-height", inputLineHeight)}
    ${comp("color", inputColor)}
  }

  .icon {
    height: 32px;
    width: 32px;
  }

  @media (${mediaTablet}) {

    margin-right: 11px;

    > span {
      display: none;
    }

    .icon {
      height: 24px;
      width: 24px;

      svg {
        width: 12px;
        height: auto;

      }
    }
  }
  }
`);
//# sourceMappingURL=styled.js.map