{"size": 1034, "ext": "js", "max_stars_repo_path": "src/components/CopyButton/CopyButton.css.js", "max_stars_repo_name": "marceloadsj/hsds-react", "max_stars_repo_stars_event_min_datetime": "2017-10-02T14:14:06.000Z", "max_stars_repo_stars_event_max_datetime": "2018-11-07T05:05:10.000Z", "max_issues_repo_path": "src/components/CopyButton/CopyButton.css.js", "max_issues_repo_name": "marceloadsj/hsds-react", "max_issues_repo_issues_event_min_datetime": "2017-08-31T20:12:07.000Z", "max_issues_repo_issues_event_max_datetime": "2018-11-08T18:54:19.000Z", "max_forks_repo_path": "src/components/CopyButton/CopyButton.css.js", "max_forks_repo_name": "marceloadsj/hsds-react", "max_forks_repo_forks_event_min_datetime": "2017-10-20T19:47:17.000Z", "max_forks_repo_forks_event_max_datetime": "2018-06-10T17:43:01.000Z"}
{"max_stars_count": 19, "max_issues_count": 321, "max_forks_count": 3, "avg_line_length": 21.1020408163, "max_line_length": 55, "alphanum_fraction": 0.669245648}
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import Button from '../Button'
import Icon from '../Icon'

export const TextUI = styled.span`
  display: inline-flex;
  transition: opacity linear 150ms;
`
export const IconUI = styled(Icon)`
  display: inline-flex;
  transition: opacity linear 150ms;
`

export const ConfirmationIconWrapperUI = styled('div')`
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity linear 150ms;
  color: white;
  background: var(--confirmColor);
`

export const CopyButtonUI = styled(Button)`
  --confirmColor: var(--buttonMainColor);
  --confirmBorderColor: var(buttonBorderColor);
  position: relative;

  &.is-copyConfirmed {
    border-color: var(--confirmColor) !important;
    ${TextUI} {
      opacity: 0;
    }
    ${IconUI} {
      opacity: 0;
    }
    ${ConfirmationIconWrapperUI} {
      opacity: 1;
    }
  }
`
