import { colors, radius, responsiveMedia, spaces, typography } from '@/styles/variables';
import styled, { css } from 'styled-components';

import { IShareModal } from './ShareModal.interface';

export const StyledModal = styled.div<IShareModal>`
  & a {
    display: inline-block;
    width: 50%;

    text-decoration: none;
    text-align: center;
    padding: ${spaces[3]};

    & > div {
      display: flex;
      width: 3.2rem;
      height: 3.2rem;
      line-height: 3.2rem;
      border-radius: 50%;
      color: ${colors.white};
      background: ${colors.primary70};
      margin: auto;
      transition: all 0.3s ease;

      & i {
        color: currentColor;
        font-size: 1.6rem;
        margin: auto;
      }
    };

    &:hover {
      & > div {
        background: ${colors.gray50}
      }
    };

    @media only screen and (min-width: ${responsiveMedia}) {
      width: 25%;
    }
  }
`;

export const StyledInput = styled.div<IShareModal>`
  position: relative;
  background: ${colors.white};
  border: 1px solid ${colors.primary20};
  border-radius: 6px;
  padding: ${spaces[2]} ${spaces[3]};
  cursor: pointer;

  & span {
    color: ${colors.gray90};
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
  };

  & i {
    position: absolute;
    top: 50%;
    right: ${spaces[2]};
    color: ${colors.black};
    font-size: 18px;
    transform: translateY(-50%)
  }
`;

export const StyledMessage = styled.div<IShareModal>`
  position: absolute;
  bottom: 1.5rem;
  left: 50%;

  display: inline-block;
  vertical-align: top;

  color: ${colors.white};
  background-color: ${colors.primary70};
  line-height: 1.2;

  cursor: pointer;
  padding: ${spaces[2]} ${spaces[4]};
  font-size: ${typography.texts.size};;

  border-radius: ${radius.lg};

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3rem);
  transition: all 0.3s ease;

  &.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
  }
`;