<template>
  <div
    :class="[
      `section-content`,
      `section-content--tone-${tone}`,
      `section-content--pad-${pad}`
    ]"
  >
    <slot />
</div>
</template>

<script setup>
    defineProps({
        as: { type: String, default: 'h2' },
        tone: { type: String, default: 'default' },
        pad: { type: String, default: '' }, // xs, sm, md, lg
    })
</script>

<style lang="scss">
    .section-content {

      &--tone-default { background: transparent; }
      &--tone-brand { background: var(--c-brand_rouge); }
      &--tone-brand_rouge45 { background: var(--c-brand_rouge45); }
      &--tone-muted { background: var(--c-brand_rouge-weak); }
      &--tone-dark { background: var(--c-backgroud-black); }
      &--tone-brandreverse { background: var(--c-backgroud-brandreverse); }

      &--pad-xs {
        //padding-top: var(--sp-32);
        padding-bottom: var(--sp-16);
        padding-left: var(--sp-45);
        padding-right: var(--sp-8);
      }
      &--pad-sm {
        //padding-top: var(--sp-32);
        padding-bottom: var(--sp-16);
        padding-left: var(--sp-45);
        padding-right: var(--sp-8);
      }
      &--pad-md {
        //padding-top: var(--sp-80);
        padding-bottom: var(--sp-180);
        padding-left: var(--sp-45);
        padding-right: var(--sp-8);
      }
      &--pad-lg {
        //padding-top: var(--sp-80);
        padding-bottom: var(--sp-180);
        padding-left: var(--sp-45);
        padding-right: var(--sp-8);
      }
    }

    @media (max-width: 400px) {
      .section-content {
        &--pad-xs {
          //padding-bottom: calc(var(--sp-16) * 0.5);
          padding-left: calc(var(--sp-45) * 0.5);
          //padding-right: calc(var(--sp-8) * 0.5);
        }
      }
    }

    @media (max-width: 300px) {
        .section-title {
            padding-left: calc(var(--sp-45) - 20px);
        }
    }


</style>
