"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
const colors_1 = require("../../helpers/colors");
const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
exports.container = {
    backgroundColor: colors_1.BACKGROUND,
    color: colors_1.WHITE,
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    height: '100%',
    minHeight: 0,
};
exports.scrollableContainer = {
    ...exports.container,
    overflowY: 'auto',
};
exports.defaultPropsSection = {
    display: 'flex',
    flexDirection: 'column',
};
exports.visualControlsSection = {
    display: 'flex',
    flexDirection: 'column',
};
exports.compositionSection = {
    display: 'flex',
    flexDirection: 'column',
};
exports.inspectorSectionDivider = {
    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
};
exports.sequenceHeaderDivider = {
    backgroundColor: colors_1.LINE_COLOR,
    flexShrink: 0,
    height: 1,
    margin: '4px 0',
};
exports.sectionHeader = {
    color: colors_1.LIGHT_TEXT,
    fontSize: 12,
    fontWeight: 'bold',
    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
    userSelect: 'none',
};
exports.sequenceHeader = {
    backgroundColor: colors_1.BACKGROUND,
    display: 'flex',
    flexDirection: 'column',
    minWidth: 0,
    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
};
exports.sequenceHeaderTitle = {
    alignSelf: 'stretch',
    backgroundColor: colors_1.BACKGROUND,
    border: 'none',
    color: colors_1.WHITE,
    display: 'flex',
    fontFamily: 'sans-serif',
    fontSize: 12,
    lineHeight: '18px',
    margin: 0,
    maxWidth: '100%',
    minWidth: 0,
    overflow: 'hidden',
    padding: 0,
    textAlign: 'left',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
};
exports.sequenceHeaderSubtitle = {
    alignSelf: 'flex-start',
    backgroundColor: colors_1.BACKGROUND,
    border: 'none',
    color: colors_1.LIGHT_TEXT,
    display: 'inline-flex',
    fontFamily: 'sans-serif',
    fontSize: 12,
    lineHeight: '18px',
    margin: 0,
    maxWidth: '100%',
    minWidth: 0,
    overflow: 'hidden',
    padding: 0,
    textAlign: 'left',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
};
exports.sectionHeaderRow = {
    alignItems: 'center',
    display: 'flex',
    gap: 8,
    justifyContent: 'space-between',
    minWidth: 0,
};
exports.sectionHeaderTitle = {
    color: colors_1.LIGHT_TEXT,
    flexShrink: 0,
    fontSize: 12,
    fontWeight: 'bold',
    lineHeight: '16px',
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    userSelect: 'none',
    whiteSpace: 'nowrap',
};
exports.sectionHeaderStart = {
    alignItems: 'center',
    display: 'flex',
    gap: 8,
    minWidth: 0,
};
exports.sectionHeaderEnd = {
    alignItems: 'center',
    display: 'flex',
    flexShrink: 0,
};
exports.defaultPropsWarningContainer = {
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 8px`,
};
exports.defaultPropsWarningMessages = {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
};
exports.resolveLinkStyle = {
    color: colors_1.BLUE,
    fontFamily: 'sans-serif',
    fontSize: 12,
    textDecoration: 'underline',
    whiteSpace: 'nowrap',
};
exports.selectedContainer = {
    backgroundColor: colors_1.BACKGROUND,
    flex: 1,
    minHeight: 0,
    overflowY: 'auto',
};
exports.centeredMessage = {
    alignItems: 'center',
    color: colors_1.LIGHT_TEXT,
    display: 'flex',
    flex: 1,
    fontSize: 14,
    justifyContent: 'center',
    padding: 24,
    textAlign: 'center',
};
exports.detailsContainer = {
    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
};
exports.detailsWithInlineAction = {
    paddingBottom: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
};
exports.detailsBeforeInlineAction = {
    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
};
exports.guideDetailsContainer = {
    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
};
exports.detailRow = {
    alignItems: 'center',
    display: 'flex',
    gap: 12,
    justifyContent: 'space-between',
};
exports.detailLabel = {
    color: colors_1.LIGHT_TEXT,
    fontSize: 13,
};
exports.detailValue = {
    color: colors_1.WHITE,
    fontSize: 13,
    fontVariantNumeric: 'tabular-nums',
    minWidth: 0,
    textAlign: 'right',
    wordBreak: 'break-word',
};
exports.keyframeEditorRow = {
    alignItems: 'flex-start',
    display: 'flex',
    gap: 12,
    justifyContent: 'space-between',
    minWidth: 0,
    padding: '10px 0',
};
exports.keyframeEditorLabel = {
    color: colors_1.LIGHT_TEXT,
    fontSize: 13,
    lineHeight: '22px',
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
};
exports.keyframeEditorValue = {
    alignItems: 'center',
    display: 'flex',
    flexShrink: 0,
    justifyContent: 'flex-end',
    minHeight: 22,
    minWidth: 0,
};
