"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ItemContainer = exports.List = exports.GridContainer = exports.Wrapper = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n   display: flex;\n"], ["\n   display: flex;\n"])));
exports.GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n   //max-width: 800px;\n   display: flex;\n   flex-wrap: wrap;\n   //grid-template-columns: repeat(var(--col-count), 1fr);\n   //grid-gap: 10px;\n   //padding: 20px;\n   //--col-count: 5;\n\n   @media (max-width: 850px) {\n      grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr);\n   }\n\n   @media (max-width: 650px) {\n      grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr);\n   }\n"], ["\n   //max-width: 800px;\n   display: flex;\n   flex-wrap: wrap;\n   //grid-template-columns: repeat(var(--col-count), 1fr);\n   //grid-gap: 10px;\n   //padding: 20px;\n   //--col-count: 5;\n\n   @media (max-width: 850px) {\n      grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr);\n   }\n\n   @media (max-width: 650px) {\n      grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr);\n   }\n"])));
exports.List = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n   display: grid;\n   grid-auto-rows: max-content;\n   box-sizing: border-box;\n   min-width: 350px;\n   grid-gap: 10px;\n   padding: 20px;\n   padding-bottom: 0;\n   margin: 10px;\n   border-radius: 5px;\n   min-height: 200px;\n   transition: background-color 350ms ease;\n"], ["\n   display: grid;\n   grid-auto-rows: max-content;\n   box-sizing: border-box;\n   min-width: 350px;\n   grid-gap: 10px;\n   padding: 20px;\n   padding-bottom: 0;\n   margin: 10px;\n   border-radius: 5px;\n   min-height: 200px;\n   transition: background-color 350ms ease;\n"])));
exports.ItemContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n   display: flex;\n   box-sizing: border-box;\n   transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1))\n      scaleY(var(--scale-y, 1));\n   transform-origin: 0 0;\n   touch-action: manipulation;\n   position: relative;\n"], ["\n   display: flex;\n   box-sizing: border-box;\n   transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1))\n      scaleY(var(--scale-y, 1));\n   transform-origin: 0 0;\n   touch-action: manipulation;\n   position: relative;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=ImagesSortable.style.js.map