{"size": 1082, "ext": "js", "max_stars_repo_path": "packages/core/logo/src/styledWrapper.js", "max_stars_repo_name": "varijkapil13/atlaskit", "max_stars_repo_stars_event_min_datetime": "2020-05-12T11:46:06.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-12T02:10:34.000Z", "max_issues_repo_path": "packages/core/logo/src/styledWrapper.js", "max_issues_repo_name": "varijkapil13/atlaskit", "max_issues_repo_issues_event_min_datetime": "2019-05-08T06:48:30.000Z", "max_issues_repo_issues_event_max_datetime": "2019-05-08T06:48:30.000Z", "max_forks_repo_path": "packages/core/logo/src/styledWrapper.js", "max_forks_repo_name": "varijkapil13/atlaskit", "max_forks_repo_forks_event_min_datetime": "2020-04-30T09:40:37.000Z", "max_forks_repo_forks_event_max_datetime": "2020-04-30T09:40:37.000Z"}
{"max_stars_count": 7, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 25.7619047619, "max_line_length": 112, "alphanum_fraction": 0.6192236599}
// @flow
import styled, { css } from 'styled-components';
import { sizes } from './constants';

const Wrapper = styled.span`
  color: ${p => p.iconColor};
  display: inline-block;
  fill: ${p => p.textColor};
  height: ${p => sizes[p.size]}px;
  position: relative;
  user-select: none;

  > svg {
    fill: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  > canvas {
    display: block;
    height: 100%;
    visibility: hidden;
  }
  ${p =>
    /* Only apply this if our stop-colors are inherit, if they aren't we don't need to set stop-color via css */
    p.iconGradientStart === 'inherit' &&
    p.iconGradientStop === 'inherit' &&
    css`
      /* Stop-color doesn't properly apply in chrome when the inherited/current color changes.
      * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
      * rule) and then override it with currentColor for the color changes to be picked up.
      */
      stop {
        stop-color: currentColor;
      }
    `};
`;

export default Wrapper;
