<template>
  <DsHeading
    as="h1"
    :tone="tone"
    :class="[
      `section-title`,
      `section-title--pad-${pad}`
    ]"
  >
    <slot />
  </DsHeading>
</template>

<script setup>
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
    defineProps({
        as: { type: String, default: 'h2' },
        tone: { type: String, default: 'default' },
        pad: { type: String, default: 'sm' }, // xs, sm, md, lg
    })
</script>

<style lang="scss">
    .section-title {
      &--pad-xs {
        padding-top: var(--sp-32);
        padding-bottom: var(--sp-16);
        padding-left: var(--sp-45);
      }
      &--pad-sm {
        padding-top: var(--sp-48);
        padding-bottom: var(--sp-48);
        padding-left: var(--sp-45);
      }
      &--pad-md {
        padding-top: var(--sp-80);
        padding-bottom: var(--sp-180);
        padding-left: var(--sp-45);
      }
      &--pad-lg {
        padding-top: var(--sp-80);
        padding-bottom: var(--sp-180);
        padding-left: var(--sp-45);
      }
    }
    @media (max-width: 400px) {
      .section-title {
        &--pad-xs {
          padding-left: calc(var(--sp-45) * 0.5);
        }
      }
    }
    @media (max-width: 300px) {
        .section-title {
            padding-left: calc(var(--sp-45) - 20px);
        }
    }


</style>
