/* This is the outer shell. The shell is like the
skeletton of the website. It contains the core components,
but does not contain any data. The class present in shell
are at root and are always visible. It's about MACRO layouting.

Layout mixin should by applied into the body,
or any root class, like '.app'. This root class contain
he base layout of the site, like header, footer, etc.

  @max-width: the site max width, by default 960px.
  @columns-name: The name of the class for columns.
  @columns-total: Total number of columns.
  @columns-halfgap: A numerical gap for columns, with value.
*/

.layout(
  @max-width: @base[max-width],
  @columns-name: @base[columns-name],
  @columns-total: @base[columns-total],
  @columns-halfgap: @base[columns-halfgap],
  @aperture: @base[aperture],
  @marge: @base[marge]
) {
  width: 100%;

  /* Keep footer at the bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  * {
    box-sizing: border-box;

    &::before,
    &::after {
      box-sizing: border-box;
    }
  }

  /* The flow is a content area. It allows content
  to be placed within the width limit of the site.
  By default, flow is centered, but the '-uncentered'
  modifier can be used to remove this behavior.

  Flow is intended to be used multiple times within a layout. */

  .flow {
    width: 100%;
    max-width: @max-width;
    margin-left: auto;
    margin-right: auto;

    &-uncentered {
      margin-left: unset;
      margin-right: unset;
    }
  }

  /* Aperture is a horizontal spacing of content,
  it's used to create viusal gap between elements. */

  .aperture {
    padding-right: @aperture;
    padding-left: @aperture;
  }

  /* Marge is a verticlal spacing of content,
  it's used to create viusal gap between elements. */

  .marge {
    margin-top: @marge;
    margin-bottom: @marge;
  }

  /* Function into layout/columns.less */

  .generate-columns(
    @columns-name,
    @columns-total,
    @columns-halfgap
  );

  each(@media, .(@media-size, @media-name) {
    @class-name: @{columns-name}@{media-name}-;

    @media screen and (max-width: @media-size) {
      .generate-columns(
        @class-name,
        @columns-total,
        @columns-halfgap
      );
    }
  });

  /* A row is a simple flex container for grid usage */

  .row {
    width: 100%;
    .flex-container(wrap, row, 0, 0, 0);
  }

  /* A blank divider */

  .interspace {
    margin: 0rem 0rem 4rem 0rem;
  }

  /* A divider with a colored line */

  .rule {
    border-color: @colors[@light][border];
    border-width: 0px;
    border-top-width: 1px;
    border-style: solid;
    margin: 2rem 0rem;
    width: 100%;
    display: block;
    height: 1px;
    padding: 0em;
  }

}

/* Construit la classe shell de .section.
@total :	Le padding de base des section.
@base:		L'élément media actuellement en usage
;*/

.section(@base-pading, @media : desktop) {
  .section {
    & when(@media = desktop) {
      padding: (@base-pading) 0;
    }

    & when(@media = tablet) {
      padding: (@base-pading / 1.5) 0;
    }

    & when(@media = mobile) {
      padding: (@base-pading / 2) 0;
    }
  }
}

footer,
.footer {
  margin-top: auto;
}

/* Ref :
- https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/ */
