<template>
  <div class="paragraph-tools-container mb-l">
    <Title tag="h3" class="tools-title">{{ $_tr('hrTools') }}</Title>

    <ToolsListing :static-data="heritedData.tools.data" />
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'

import ToolsListing from '@inside-tools/components/lib/ToolsListing'

export default {
  name: 'SpaceToolsParagraph',
  $_i18nRootPath: 'customs.PARAGRAPHS',
  components: {
    Title,
    ToolsListing
  }
}
</script>

<style lang="scss" scoped>
.paragraph-tools-container {
  :deep(.tool-item-container.full .visual-container) {
    width: var(--spacing-xl);
    height: var(--spacing-xl);
  }

  .tools-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-m);
  }

  .tools-item__title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
  }

  .tools-item__tooltip {
    font-size: var(--font-size-labor);
  }
}
</style>
