/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
import { css } from '@emotion/react';
import { akEditorLineHeight, akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
export const TaskDecisionSharedCssClassName = {
  DECISION_CONTAINER: 'decisionItemView-content-wrap',
  TASK_CONTAINER: 'taskItemView-content-wrap',
  TASK_ITEM: 'task-item'
};
export const tasksAndDecisionsStyles = css`
  .ProseMirror {
    .taskItemView-content-wrap,
    .${TaskDecisionSharedCssClassName.DECISION_CONTAINER} {
      position: relative;
      min-width: ${akEditorTableCellMinWidth}px;
    }

    .${TaskDecisionSharedCssClassName.DECISION_CONTAINER} {
      margin-top: 0;
    }

    .${TaskDecisionSharedCssClassName.TASK_CONTAINER} {
      span[contenteditable='false'] {
        height: ${akEditorLineHeight}em;
      }
    }

    .${TaskDecisionSharedCssClassName.TASK_ITEM} {
      line-height: ${akEditorLineHeight};
    }
  }

  div[data-task-local-id] {
    span[contenteditable='false'] {
      height: ${akEditorLineHeight}em;
    }
    span[contenteditable='false'] + div {
      line-height: ${akEditorLineHeight}em;
    }
  }

  div[data-task-list-local-id] {
    margin: ${"var(--ds-space-150, 12px)"} 0 0 0;
  }

  div[data-task-list-local-id] {
    // If task item is not first in the list then set margin top to 4px.
    div + div {
      margin-top: ${"var(--ds-space-050, 4px)"};
    }
  }

  // If task list is not first in the document then set margin top to 4px.
  div[data-task-list-local-id] div[data-task-list-local-id] {
    margin-top: ${"var(--ds-space-050, 4px)"};
    margin-left: ${"var(--ds-space-300, 24px)"};
  }

  /* When action list is inside panel */
  .ak-editor-panel__content {
    > div[data-task-list-local-id]:first-child {
      margin: 0 0 0 0 !important;
    }
  }
`;