"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledCircle = exports.HiddenPlaceholderWrapper = exports.ActionButton = exports.ActionsRender = exports.XMappingSectionHeader = exports.XMappingListRender = exports.XMappingDragItem = exports.XMappingItemRender = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const MappingConstants_1 = require("@appglue/common/dist/Mapping/MappingConstants");
exports.XMappingItemRender = styled_components_1.default.div `
    width: 100%;
    position: relative;

    background: ${(props) => props.isInvalid
    ? "transparent;"
    : props.isDraggingOver
        ? "rgba(64, 80, 166, 0.4)"
        : props.size === "Medium"
            ? "white"
            : "#F1F1F6"};

    .ActionsRender,
    .drag-connector {
        opacity: 0;
        transition: opacity 0.1s ease-in;
    }

    .ActionsRender {
        height: 0;
        width: 0;
    }

    ${(props) => !props.isDraggingOver &&
    `
            .drag-connector.isdragging {
                opacity: 1;
            }

            &:hover .drag-connector,
            &:hover .ActionsRender {
                opacity: 1;

            }

            &:hover .ActionsRender {

                height: auto;
                width: auto;
            }
        `}
`;
exports.XMappingDragItem = styled_components_1.default.div `
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;

    ${(props) => (props.size === "Medium" ? "padding: 8px 16px;" : "padding: 2px 12px;")}

    border: 1px solid ${(props) => props.highlighted ? MappingConstants_1.MappingConstants.HIGHLIGHT_MAPPING_LINE_COLOR : "rgba(39, 41, 50, 0.1)"};
    box-sizing: border-box;
    border-radius: 4px;

    ${(props) => props.isDragging
    ? `
                background: #fff;
            `
    : ``}

    color: #272932;
`;
exports.XMappingListRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    flex: 1;

    overflow-y: auto;
    overflow-x: hidden;

    position: relative;
`;
exports.XMappingSectionHeader = styled_components_1.default.div `
    display: flex;
    justify-content: space-between;
    //styleName: text/Inter Medium 14px;

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;

    color: rgba(64, 80, 166, 0.4);

    padding: 17px 24px;
`;
exports.ActionsRender = styled_components_1.default.div `
    position: absolute;
    bottom: 100%;
    right: 0;

    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    border-radius: 4px;

    display: flex;
    flex-direction: row;
`;
exports.ActionButton = styled_components_1.default.div `
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    background: #fff;
    border-radius: 4px;
`;
exports.HiddenPlaceholderWrapper = styled_components_1.default.div `
    display: none;
`;
exports.StyledCircle = styled_components_1.default.div `
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #4050a6;
`;
//# sourceMappingURL=CommonStyles.js.map