"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.ImageContainer = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
var GetThemeVar_1 = require("../../../support/GetThemeVar");
exports.ImageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n   margin: 5px;\n   position: relative;\n   overflow: hidden;\n   border-radius: 10px;\n\n   .cover {\n      width: 140px;\n      height: 140px;\n      background-color: black;\n      background-repeat: no-repeat;\n      background-position: center center;\n      background-size: contain;\n      transition: 0.2s all;\n      border-radius: 10px;\n   }\n\n   .icon-close,\n   .icon-rotate-left,\n   .icon-rotate-right {\n      cursor: pointer;\n      position: absolute;\n      background: black;\n      color: white;\n      width: 26px;\n      height: 26px;\n      line-height: 26px;\n      font-size: 14px;\n      text-align: center;\n      border-radius: 100px;\n      transition: 0.15s all;\n\n      &:hover {\n         background: ", ";\n         color: ", ";\n      }\n   }\n\n   .icon-rotate-left {\n      left: 5px;\n      bottom: 5px;\n   }\n\n   .icon-rotate-right {\n      left: 40px;\n      bottom: 5px;\n   }\n\n   .icon-close {\n      right: 5px;\n      top: 5px;\n      z-index: 50;\n   }\n\n   .item {\n      position: relative;\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      border: 2px solid black;\n      outline: none;\n      box-sizing: border-box;\n      list-style: none;\n      background: black;\n      transform-origin: 50% 50%;\n      border-radius: 10px;\n      -webkit-tap-highlight-color: transparent;\n\n      color: $text-color;\n      font-weight: $font-weight;\n      font-size: 1rem;\n      white-space: nowrap;\n\n      transform: scale(var(--scale, 1));\n      transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n\n      &:focus-visible {\n         box-shadow: 0 0px 4px 1px $focused-outline-color, $box-shadow;\n      }\n\n      &:not(.withHandle) {\n         touch-action: none;\n         user-select: none;\n         -webkit-user-select: none;\n         cursor: grab;\n      }\n\n      &.dragging:not(.dragOverlay) {\n         border: 2px dashed red;\n         background: transparent;\n\n         .cover {\n            opacity: 0;\n         }\n\n         &:focus {\n            box-shadow: $box-shadow;\n         }\n      }\n\n      &.disabled {\n         color: #999;\n         background-color: #f1f1f1;\n         &:focus {\n            box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), $box-shadow;\n         }\n         cursor: not-allowed;\n      }\n\n      &.dragOverlay {\n         cursor: inherit;\n         /* box-shadow: 0 0px 6px 2px $focused-outline-color; */\n         animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n         transform: scale(var(--scale));\n         box-shadow: var(--box-shadow-picked-up);\n         opacity: 1;\n      }\n\n      &.color:before {\n         content: '';\n         position: absolute;\n         top: 50%;\n         transform: translateY(-50%);\n         left: 0;\n         height: 100%;\n         width: 3px;\n         display: block;\n         border-top-left-radius: 3px;\n         border-bottom-left-radius: 3px;\n         background-color: var(--color);\n      }\n\n      &:hover {\n         .Remove {\n            visibility: visible;\n         }\n      }\n   }\n\n   .loading {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      z-index: 21;\n      background: rgba(255, 255, 255, 0.8);\n      line-height: initial;\n      top: 0px;\n      left: 0px;\n\n      .progress-loading {\n         position: absolute;\n         top: 50%;\n         left: 50%;\n         transform: translate(-50%, -50%);\n         width: 80%;\n\n         .value {\n            font-size: 14px;\n            text-align: center;\n            color: ", ";\n            font-weight: 600;\n         }\n\n         .load-bar {\n            height: 7px;\n            background: #222;\n            width: 80%;\n            margin: auto;\n            position: relative;\n            border-radius: 100px;\n            overflow: hidden;\n\n            .load-bar-finish {\n               transition: 0.15s all;\n               background: ", ";\n               width: 80%;\n               height: 100%;\n            }\n         }\n      }\n   }\n\n   .error-container {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      z-index: 21;\n      background: rgba(255, 255, 255, 0.8);\n      line-height: initial;\n      top: 0px;\n      left: 0px;\n\n      .error {\n         position: absolute;\n         color: ", ";\n         top: 50%;\n         left: 50%;\n         transform: translate(-50%, -50%);\n         width: 80%;\n         text-align: center;\n         line-height: 1;\n\n         svg {\n            font-size: 34px;\n            margin: auto;\n            margin-bottom: 10px;\n            display: block;\n            text-align: center;\n         }\n\n         button {\n            font-weight: bold;\n            font-size: 12px;\n            text-transform: uppercase;\n            padding: 5px 10px;\n            border: none;\n            color: white;\n            margin-top: 10px;\n            background: ", ";\n         }\n      }\n   }\n"], ["\n   margin: 5px;\n   position: relative;\n   overflow: hidden;\n   border-radius: 10px;\n\n   .cover {\n      width: 140px;\n      height: 140px;\n      background-color: black;\n      background-repeat: no-repeat;\n      background-position: center center;\n      background-size: contain;\n      transition: 0.2s all;\n      border-radius: 10px;\n   }\n\n   .icon-close,\n   .icon-rotate-left,\n   .icon-rotate-right {\n      cursor: pointer;\n      position: absolute;\n      background: black;\n      color: white;\n      width: 26px;\n      height: 26px;\n      line-height: 26px;\n      font-size: 14px;\n      text-align: center;\n      border-radius: 100px;\n      transition: 0.15s all;\n\n      &:hover {\n         background: ", ";\n         color: ", ";\n      }\n   }\n\n   .icon-rotate-left {\n      left: 5px;\n      bottom: 5px;\n   }\n\n   .icon-rotate-right {\n      left: 40px;\n      bottom: 5px;\n   }\n\n   .icon-close {\n      right: 5px;\n      top: 5px;\n      z-index: 50;\n   }\n\n   .item {\n      position: relative;\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      border: 2px solid black;\n      outline: none;\n      box-sizing: border-box;\n      list-style: none;\n      background: black;\n      transform-origin: 50% 50%;\n      border-radius: 10px;\n      -webkit-tap-highlight-color: transparent;\n\n      color: $text-color;\n      font-weight: $font-weight;\n      font-size: 1rem;\n      white-space: nowrap;\n\n      transform: scale(var(--scale, 1));\n      transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n\n      &:focus-visible {\n         box-shadow: 0 0px 4px 1px $focused-outline-color, $box-shadow;\n      }\n\n      &:not(.withHandle) {\n         touch-action: none;\n         user-select: none;\n         -webkit-user-select: none;\n         cursor: grab;\n      }\n\n      &.dragging:not(.dragOverlay) {\n         border: 2px dashed red;\n         background: transparent;\n\n         .cover {\n            opacity: 0;\n         }\n\n         &:focus {\n            box-shadow: $box-shadow;\n         }\n      }\n\n      &.disabled {\n         color: #999;\n         background-color: #f1f1f1;\n         &:focus {\n            box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), $box-shadow;\n         }\n         cursor: not-allowed;\n      }\n\n      &.dragOverlay {\n         cursor: inherit;\n         /* box-shadow: 0 0px 6px 2px $focused-outline-color; */\n         animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n         transform: scale(var(--scale));\n         box-shadow: var(--box-shadow-picked-up);\n         opacity: 1;\n      }\n\n      &.color:before {\n         content: '';\n         position: absolute;\n         top: 50%;\n         transform: translateY(-50%);\n         left: 0;\n         height: 100%;\n         width: 3px;\n         display: block;\n         border-top-left-radius: 3px;\n         border-bottom-left-radius: 3px;\n         background-color: var(--color);\n      }\n\n      &:hover {\n         .Remove {\n            visibility: visible;\n         }\n      }\n   }\n\n   .loading {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      z-index: 21;\n      background: rgba(255, 255, 255, 0.8);\n      line-height: initial;\n      top: 0px;\n      left: 0px;\n\n      .progress-loading {\n         position: absolute;\n         top: 50%;\n         left: 50%;\n         transform: translate(-50%, -50%);\n         width: 80%;\n\n         .value {\n            font-size: 14px;\n            text-align: center;\n            color: ", ";\n            font-weight: 600;\n         }\n\n         .load-bar {\n            height: 7px;\n            background: #222;\n            width: 80%;\n            margin: auto;\n            position: relative;\n            border-radius: 100px;\n            overflow: hidden;\n\n            .load-bar-finish {\n               transition: 0.15s all;\n               background: ", ";\n               width: 80%;\n               height: 100%;\n            }\n         }\n      }\n   }\n\n   .error-container {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      z-index: 21;\n      background: rgba(255, 255, 255, 0.8);\n      line-height: initial;\n      top: 0px;\n      left: 0px;\n\n      .error {\n         position: absolute;\n         color: ", ";\n         top: 50%;\n         left: 50%;\n         transform: translate(-50%, -50%);\n         width: 80%;\n         text-align: center;\n         line-height: 1;\n\n         svg {\n            font-size: 34px;\n            margin: auto;\n            margin-bottom: 10px;\n            display: block;\n            text-align: center;\n         }\n\n         button {\n            font-weight: bold;\n            font-size: 12px;\n            text-transform: uppercase;\n            padding: 5px 10px;\n            border: none;\n            color: white;\n            margin-top: 10px;\n            background: ", ";\n         }\n      }\n   }\n"])), function (props) { return GetThemeVar_1.GetThemeVar(props.theme, 'primary'); }, function (props) { return GetThemeVar_1.GetThemeVar(props.theme, 'primaryTextInside'); }, function (props) { return GetThemeVar_1.GetThemeVar(props.theme, 'primary'); }, function (props) { return GetThemeVar_1.GetThemeVar(props.theme, 'primary'); }, function (props) { return GetThemeVar_1.GetThemeVar(props.theme, 'red'); }, function (props) { return GetThemeVar_1.GetThemeVar(props.theme, 'primary'); });
var templateObject_1;
//# sourceMappingURL=CardImageUploadSortable.style.js.map