import styled from "styled-components";
export const AddressInputWrapper = styled.div(({ width, hasAvatar }) => `
        position: relative;
        width: ${width};
        display: flex;
        height: 64px;
        z-index: 100;

        .ui-input__warning {
          bottom: -10px;
        }

        .ui-select__wrapper {
            background: #FFFFFF;

            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            padding-bottom: 0;
        }

        .ui-address-input__disabled-content {
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 3;
        }

        .ui-select__content {
            padding: unset;
            justify-content: center;

            border-top-left-radius: unset;
            border-bottom-left-radius: unset;

            border-left-color: #CCDAE9;

            @media (max-width: 1023px) {
                width: unset;
                height: 56px;
                border: 1px solid #CCDAE9;
                border-left: unset;
            }
        }

        .ui-select__selected {
            width: unset;
            padding: unset;
            display: none;
        }

        .ui-select__indicator {
            margin: unset;
        }

        .ui--IdentityIcon {
          background: unset;
          border: 1px solid #ccdae9;
          border-radius: 50%;
        }

        .ui-select__modal {
            padding: 4px 0 12px; 
            width: ${width};
            left: calc(-${width} + 64px);

            @media (max-width: 1023px) {
                padding: 4px 0 12px; 
                top: 84px;
                width: ${width};
                left: calc(-${width} + 49px);
            }

            @media (max-width: 374px) {
                width: calc(${width} - 49px);
                left: calc(-${width} + 49px * 2);
            }
        }

        .ui-input__wrapper {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            padding-bottom: 0;
        }

        .ui-input__content {
            margin: unset;
            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
            border-right: unset;

            padding-left: ${hasAvatar ? "60px" : "15px"};

            @media (max-width: 1023px) {
                padding-left: ${hasAvatar ? "48px" : "15px"};
                padding-right: 49px;
            }
        }

        .ui-input__input {
          font-size: 16px;
          line-height: 22px;
          padding-top: ${hasAvatar ? "14px" : "0"};
        }

        .ui-input__title {
            margin-bottom: 8px;
            min-height: 20px;        
        }

        .ui-select__title {
            margin-bottom: 10px;
        }

        &.ui-address-input--disabled {
            .ui-select__content {
                border-left: unset;
                cursor: default;
            }

            .ui-input__content {
                border: 1px solid #CCDAE9;
                border-right: unset;
            }

            &.ui-address-input--error {
                .ui-input__content {
                    border: 1px solid #FF7979;
                    border-right: unset;
                }
                .ui-select__content {
                  border: 1px solid #FF7979;
                  border-left: unset;
                }
            }
        }

        .ui-address-input__select-option {
          display: flex;
          position: relative;
          min-height: 48px;

          .ui-address-input__avatar {
            top: 10px;
          }
        }

        @media (max-width: 1023px) {
          height: 84px;
          width: 100%;

          .ui-input__warning {
            justify-content: flex-start;
            bottom: 0px;
          }

          .ui-input__content {
            height: 56px;
          }
      }
    `);
export const Avatar = styled.div `
  position: absolute;
  z-index: 2;

  left: 17px;
  top: 14px;

  width: 36px;
  height: 36px;
  border-radius: 50%;

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

  .ui--IdentityIcon {
    width: 36px;
    height: 36px;
  }

  @media (max-width: 1023px) {
      width: 24px;
      height: 24px;

      .ui--IdentityIcon {
        width: 24px;
        height: 24px;
      }
  }
`;
export const TooltipWrapper = styled.div `
  position: absolute;
  left: 80px;
  top: -1px;
`;
export const AccWrapper = styled.div `    
  position: absolute;
  left: 64px;
  top: 14px;
  z-index: 10;

  @media (max-width: 1023px) {
    left: 47px;
    top: 40px;
  }
`;
//# sourceMappingURL=styled.js.map