"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const SelectDropDown_1 = require("../../molecules/SelectDropDown");

const StyledColorSelectDropDown = styleh_components_1.styled.withComponent(SelectDropDown_1.SelectDropDown)`
`;
exports.StyledColorSelectDropDown = StyledColorSelectDropDown;
const ColorItemContent = styleh_components_1.styled.div`
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #a7afc1;

  ${props => props.value && props.value.includes('#') && styleh_components_1.styled.css`
      background-color: ${props.value};
    `};

  ${props => props.value && styleh_components_1.styled.css`
      background-color: ${props.value};
    `};

  ${props => props.value && props.value.includes('http') && styleh_components_1.styled.css`
      background-image: url(${props.value});
    `};
`;
exports.ColorItemContent = ColorItemContent;
const ColorOption = styleh_components_1.styled.withComponent(SelectDropDown_1.StyledOption).attrs({
  role: 'option'
})`
  display: flex;
  align-items: center;
`;
exports.ColorOption = ColorOption;
const StyledActiveOption = styleh_components_1.styled.withComponent(SelectDropDown_1.ActiveOption)`
`;
exports.StyledActiveOption = StyledActiveOption; //# sourceMappingURL=styled.js.map