<!-- Pour gérer tous les types de main dans les différents templates de page
    Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->

<template>
  <div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`,`page-section--inner--position--${position}`]">
    <slot />
  </div>
</template>

<script setup>
    defineProps({
        size: { type: String, default: 'default' }, // default / wide / narrow
        padb : { type: String, default: '' },
        padt : { type: String, default: '' },
        position : { type: String, dafault : ''},
        overflow : { type: String, default: '' }
    })
</script>

<style lang="scss">
    .page-section--inner {
        // ne dépasse jamais l’écran
        width: 100%;
        
        // centre le bloc horizontalement, crée des marges externes fluides, fonctionne dans toutes les largeurs d’écran
        margin-inline: auto;
        
        // respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)

        &--position--relative {
            position: relative;
        }

        // limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
        &--narrow {
            max-width: var(--container-narrow);
        }
        
        // limite de largeur (par défaut)
        &--default {
            /* mobile / small screens */
            

            @media (min-width: 0px) {
                max-width: 100%;
            }
            @media (min-width: 600px) {
                max-width: 580px;
            }
            @media (min-width: 700px) {
                max-width: 660px;
            }
            @media (min-width: 800px) {
                max-width: 780px;
            }   
            @media (min-width: 900px) {
                max-width: 860px;
            }
            @media (min-width: 1000px) {
                max-width: 950px;
            }
            @media (min-width: 1100px) {
                max-width: 1020px;
            }
            @media (min-width: 1200px) {
                max-width: 1100px;
            }
            @media (min-width: 1300px) {
                max-width: 1200px;
            }
            @media (min-width: 1400px) {
                max-width: 1300px;
            }
            @media (min-width: 1500px) {
                max-width: 1400px;
            }
        }
        // limite de largeur un peu plus grande que par défaut
        &--wide {
            max-width: var(--container-wide);
        }

        // Padding
        &--padt--xs {
            padding-top: 30px;
        }
        &--padt--sm {
            padding-top: 45px;
        }
        &--padb--xs {
            padding-bottom: 17px;
        }
        &--padb--sm {
            padding-bottom: 30px;
        }
        
     
    }
</style>