{"size": 757, "ext": "js", "max_stars_repo_path": "src/components/simple-color-picker/simple-color-input/simple-color-input.style.js", "max_stars_repo_name": "blaky/carbon", "max_stars_repo_stars_event_min_datetime": "2017-05-18T14:24:01.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T23:30:53.000Z", "max_issues_repo_path": "src/components/simple-color-picker/simple-color-input/simple-color-input.style.js", "max_issues_repo_name": "blaky/carbon", "max_issues_repo_issues_event_min_datetime": "2017-05-19T01:09:37.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T15:55:19.000Z", "max_forks_repo_path": "src/components/simple-color-picker/simple-color-input/simple-color-input.style.js", "max_forks_repo_name": "blaky/carbon", "max_forks_repo_forks_event_min_datetime": "2017-05-18T11:57:17.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-07T19:45:35.000Z"}
{"max_stars_count": 229, "max_issues_count": 3060, "max_forks_count": 92, "avg_line_length": 23.65625, "max_line_length": 78, "alphanum_fraction": 0.680317041}
import styled from "styled-components";
import baseTheme from "../../../style/themes/base";
import { Input as SimpleColorInput } from "../../../__internal__/input";
import StyledColorSampleBox from "../color-sample-box/color-sample-box.style";

const StyledSimpleColorInput = styled(SimpleColorInput)`
  position: absolute;
  opacity: 0;
  height: 56px;
  width: 56px;
  margin: 0;

  &:hover {
    cursor: pointer;
  }

  &:disabled:hover {
    cursor: not-allowed;
  }

  &:focus + ${StyledColorSampleBox} {
    box-shadow: inset 0px 0px 0px 3px ${({ theme }) => theme.colors.white};
    border: 2px solid ${({ theme }) => theme.colors.focus};
  }
`;

StyledSimpleColorInput.defaultProps = {
  theme: baseTheme,
};

export default StyledSimpleColorInput;
