"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const view_container_1 = require("view-container");
const SelectDropDown_1 = require("molecules/SelectDropDown");
const StyledColorSelectDropDown = view_container_1.styled.withComponent(SelectDropDown_1.SelectDropDown) `
`;
exports.StyledColorSelectDropDown = StyledColorSelectDropDown;
const ColorItemContent = view_container_1.styled.div `
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #a7afc1;

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

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

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