import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { getTheme } from "../../../utils/theme/getTheme";
import { LIGHT_THEME } from "../../../Pallette/themes";
import { defaultThemeColorPicker } from "../../theme";
var COMPONENT_NAME = "colorPicker";
export var Saturation = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeColorPicker,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  min-width: 212px;\n  padding: 5px;\n  height: 100%;\n  min-height: 100px;\n  border-radius: 8px;\n  background-color: ", ";\n  background-image: linear-gradient(0deg, #000000, transparent),\n    linear-gradient(90deg, #ffffff, hsla(0, 0%, 100%, 0));\n\n  & button {\n    position: absolute;\n    width: 11.56px;\n    height: 11.56px;\n    opacity: 1;\n    border: 2px solid\n      ", ";\n    border-radius: 50%;\n    cursor: pointer;\n    ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  min-width: 212px;\n  padding: 5px;\n  height: 100%;\n  min-height: 100px;\n  border-radius: 8px;\n  background-color: ", ";\n  background-image: linear-gradient(0deg, #000000, transparent),\n    linear-gradient(90deg, #ffffff, hsla(0, 0%, 100%, 0));\n\n  & button {\n    position: absolute;\n    width: 11.56px;\n    height: 11.56px;\n    opacity: 1;\n    border: 2px solid\n      ", ";\n    border-radius: 50%;\n    cursor: pointer;\n    ", ";\n  }\n"])), function (_a) {
    var hue = _a.hue;
    return "hsl(" + hue + ", 100%, 50%)";
}, 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 hex = _a.hex, left = _a.left, top = _a.top;
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background: ", ";\n    left: calc(", "% - 5px);\n    top: calc(", "% - 5px);\n  "], ["\n    background: ", ";\n    left: calc(", "% - 5px);\n    top: calc(", "% - 5px);\n  "])), hex, left * 100, -(top * 100) + 100);
});
export var SaturationActiveBlock = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"])));
Saturation.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
