"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useStyles = void 0;
var styles_1 = require("@mui/styles");
exports.useStyles = (0, styles_1.makeStyles)({
    root: function (_a) {
        var isOpaque = _a.isOpaque;
        return ({
            display: 'flex',
            opacity: isOpaque ? 1 : 0.19,
            transition: 'opacity 0.3s'
        });
    },
    header: {
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        height: '28px',
        cursor: 'grab',
        '&[aria-disabled="true"]': {
            cursor: 'default'
        }
    },
    focusedIcon: function (_a) {
        var isFocused = _a.isFocused;
        return ({
            width: '26px',
            '&:not([disabled])': {
                border: '1px solid rgba(0, 0, 0, 0.12)'
            },
            height: '28px',
            color: isFocused ? '#000' : 'rgba(0, 0, 0, 0.54)',
            borderRadius: 0,
            margin: '0px 1px'
        });
    },
    crosswalkWrapper: {
        width: '100%',
        overflow: 'hidden'
    },
    sourceIcon: {
        height: '16px',
        width: '16px',
        marginRight: '9px',
        fontSize: '14px'
    },
    attributesWrapper: function (_a) {
        var color = _a.color;
        return ({
            border: '1px solid',
            borderColor: color,
            position: 'relative'
        });
    },
    deleteCrosswalkButton: {
        position: 'absolute',
        top: 5,
        right: 5
    },
    labelValue: {
        marginLeft: 5
    },
    dependentIcon: {
        width: '16px',
        height: '16px',
        fillOpacity: 0.38
    },
    dragWrapper: {
        display: 'flex',
        flexGrow: 1,
        alignItems: 'center',
        '&:focus-visible': {
            outline: 'none'
        }
    }
});
