import styled from "styled-components";
export const XMappingItemRender = styled.div `
    width: 100%;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;

    padding: 8px 16px;

    color: #272932;

    border: 1px solid rgba(39, 41, 50, 0.1);
    box-sizing: border-box;
    border-radius: 4px;

    position: relative;
    background: ${(props) => (props.isDraggingOver ? "rgba(64, 80, 166, 0.4)" : "#ffffff")};

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

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

            &:hover .drag-connector,
            &:hover .ActionsRender {
                opacity: 1;
            }
        `}
`;
export const XMappingSubItemRender = styled.div `
    ${(props) => props.isCollapsed
    ? `
                position: absolute;
                right: 0;
                top: -30px;
                width: 10px;
                height: 10px;
                opacity: 0;
            `
    : `
                width: 100%;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 0em;
                text-align: left;
            
                padding: 2px 16px;
            
                color: rgba(39, 41, 50, 0.8);
            
                background: ${props.isDraggingOver ? "rgba(64, 80, 166, 0.4)" : "#f1f1f6"};
                border: 1px solid rgba(39, 41, 50, 0.1);
                box-sizing: border-box;
                border-radius: 4px;
            
                position: relative;
            
                .ActionsRender {
                    opacity: 0;
                    transition: opacity 0.1s ease-in;
                }
            
                &:hover .ActionsRender {
                    opacity: 1;
                }
            
                .drag-connector {
                    opacity: 0;
                }
                ${!props.isDraggingOver &&
        `
                        .drag-connector.isdragging {
                            opacity: 1;
                        }
            
                        &:hover .drag-connector {
                            opacity: 1;
                        }
                    `}
            `}
`;
export const XMappingListRender = styled.div `
    display: flex;
    flex-direction: column;
    padding: 24px;

    flex: 1;

    padding: 0 24px;

    overflow: auto;

    position: relative;

    > * {
        margin-top: 8px;

        &:first-child {
            margin-top: 0;
        }
    }
`;
export const XMappingSectionHeader = styled.div `
    display: flex;
    justify-content: space-between;
    //styleName: text/Inter Medium 14px;
    font-family: Inter;
    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;
`;
export const ActionsRender = styled.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;
`;
export const ActionButton = styled.div `
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    background: #fff;
    border-radius: 4px;
`;
export const XMappingChildrenRender = styled.div `
    padding: 0 8px 0 25px;
    position: relative;

    ${(props) => !props.isCollapsed
    ? `
                > * {
                    margin-top: 8px;
            
                    &:first-child {
                        margin-top: 0;
                    }
                }
            `
    : `margin: 0;`}
`;
//# sourceMappingURL=CommonStyles.js.map