@particle-network/connectkit/dist/esm/chunk-TT5EWHLM.mjs

"use client";
import {
  ForwardContainer,
  WalletLable,
  init_styles
} from "./chunk-AHPYJJP6.mjs";
import {
  __esm
} from "./chunk-Y7A564BU.mjs";

// src/components/socialLogin/styles.ts
import { motion } from "framer-motion";
import { css, keyframes, styled } from "styled-components";
var FadeIn, SocialLoginContainer, SocialItem, ToggleContainer;
var init_styles2 = __esm({
  "src/components/socialLogin/styles.ts"() {
    "use strict";
    init_styles();
    FadeIn = keyframes`
from { opacity: 0; }
  to { opacity: 1; }
`;
    SocialLoginContainer = styled(motion.div)`
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateZ(0);
  flex-wrap: wrap;
  flex-direction: ${(props) => {
      if (props.$felxRow) {
        return "row";
      }
      return "column";
    }};
  gap: ${(props) => {
      if (props.$felxRow) {
        return "0px";
      }
      return "12px";
    }};
`;
    SocialItem = styled(motion.div)`
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  border: 1px solid var(--pcm-button-border-color);
  transition: 0.2s ease width;
  cursor: pointer;
  opacity: 0;
  animation: ${FadeIn} 300ms ease-out both;
  position: relative;
  user-select: none;

  ${(props) => {
      if (props.$isDisabled) {
        return css`
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
      `;
      } else {
        return css``;
      }
    }}

  ${(props) => {
      if (props.$felxRow) {
        return css`
        padding: 0;
        width: 46px;
        border-radius: var(--pcm-rounded-full);
        justify-content: center;
      `;
      }
      return css`
      padding-left: 16px;
      padding-right: 16px;
      width: 100%;
      border-radius: var(--pcm-rounded-lg);
      justify-content: flex-start;
      ${ForwardContainer} {
        svg {
          height: inherit;
          width: inherit;
        }
      }
      @media only screen and (min-width: 560px) {
        &:hover {
          ${WalletLable} {
            opacity: 0;
            transform: translateX(-15px);
          }
          ${ForwardContainer} {
            opacity: 1;
            transform: translateX(10px);
          }
        }
      }

      @media only screen and (max-width: 560px) {
        &:hover:active {
          ${WalletLable} {
            opacity: 0;
            transform: translateX(-15px);
          }
          ${ForwardContainer} {
            opacity: 1;
            transform: translateX(10px);
          }
        }
      }
    `;
    }}

  @media only screen and (min-width: 560px) {
    &:hover {
      box-shadow: var(--pcm-button-hover-shadow);
    }
  }

  @media only screen and (max-width: 560px) {
    &:hover:active {
      box-shadow: var(--pcm-button-hover-shadow);
    }
  }

  svg {
    object-fit: cover;
    ${(props) => {
      if (props.$felxRow) {
        return css`
          height: 30px;
          width: 30px;
        `;
      }
      return css`
        height: 22px;
        width: 22px;
      `;
    }}
  }

  span {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    text-align: center;
    text-transform: capitalize;
    display: ${(props) => {
      if (props.$felxRow) {
        return "none";
      }
      return "block";
    }};
  }
`;
    ToggleContainer = styled(motion.div)`
  height: 47px;
  width: 47px;
  cursor: pointer;
  border-radius: var(--pcm-rounded-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pcm-body-background-secondary);
  opacity: 0;
  animation: ${FadeIn} 300ms ease-out both;

  &:hover {
    box-shadow: var(--pcm-button-hover-shadow);
  }
  svg {
    height: 25px;
    width: 25px;
    object-fit: cover;
  }
`;
  }
});

export {
  SocialLoginContainer,
  SocialItem,
  ToggleContainer,
  init_styles2 as init_styles
};
//# sourceMappingURL=chunk-TT5EWHLM.mjs.map