import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { LIGHT_THEME } from "../../../Pallette/themes";
import { defaultThemeColorPicker } from "../../theme";
import { getTheme } from "../../../utils/theme/getTheme";
var COMPONENT_NAME = "colorPicker";
export var ColorLine = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeColorPicker,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-width: 212px;\n  min-height: 8px;\n  background: linear-gradient(\n    to right,\n    #f00 0%,\n    #ff0 17%,\n    #0f0 33%,\n    #0ff 50%,\n    #00f 67%,\n    #f0f 83%,\n    #f00 100%\n  );\n  border-radius: 8px;\n  position: relative;\n\n  & > button {\n    position: absolute;\n    width: 8px;\n    height: 16px;\n    border-radius: 8px;\n    border: 2px solid\n      ", ";\n    ", ";\n    top: -3.6px;\n    cursor: pointer;\n  }\n"], ["\n  width: 100%;\n  min-width: 212px;\n  min-height: 8px;\n  background: linear-gradient(\n    to right,\n    #f00 0%,\n    #ff0 17%,\n    #0f0 33%,\n    #0ff 50%,\n    #00f 67%,\n    #f0f 83%,\n    #f00 100%\n  );\n  border-radius: 8px;\n  position: relative;\n\n  & > button {\n    position: absolute;\n    width: 8px;\n    height: 16px;\n    border-radius: 8px;\n    border: 2px solid\n      ", ";\n    ", ";\n    top: -3.6px;\n    cursor: pointer;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.components.colorPicker.borderButton;
}, function (_a) {
    var theme = _a.theme;
    return theme.shadows.tp.bottom;
});
export var PointButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var hue = _a.hue, left = _a.left;
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    left: calc(", "% - 4px);\n    background: hsl(", ", 100%, 50%);\n  "], ["\n    left: calc(", "% - 4px);\n    background: hsl(", ", 100%, 50%);\n  "])), left / 360, hue);
});
ColorLine.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3;
