@use '../common/mixins';
@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements
// align
// color
// level
// landing (website title on homepage)
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.section {
  @include mixins.clamp(padding-inline-end, 1rem, 4vw, 4rem);
  @include mixins.clamp(padding-inline-start, 1rem, 4vw, 4rem);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  &_container {
    @include mixins.clamp(padding-block-start, 2rem, 8vw, 4rem);
    @include mixins.clamp(padding-block-end, 2rem, 8vw, 4rem);
    width: 100%;
    max-width: variables.$desktop;
    position: relative; // needed to have the content over section-landing:before
  }

  &_header {
    display: flex;
    flex-direction: column;

    & + .section_content { @include mixins.clamp(padding-block-start, 2rem, 8vw, 4rem); }
    &-dense + .section_content { padding-block-start: 2rem; }
  }

  &_content {
    width: 100%;

    & + &,
    & + .section_header {
      @include mixins.clamp(padding-block-start, 2rem, 8vw, 4rem);
    }
  }

  &_label {
    color: variables.$text-alt;
    font-weight: variables.$weight-bold;
    margin-block-end: .5rem;
  }

  &_titleWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;

    div.section_actions {
      margin-block-start: 0;
    }
  }

  &_title {
    color: variables.$primary;
    max-width: variables.$desktop*0.75;
  }
  
  &_subtitle {
    @extend %subtitle;
    max-width: variables.$max-width-subtitle;
    margin-block-start: 1rem;
    word-wrap: normal;
  }

  &_actions {

    @include mixins.responsive(down, tablet) {
      margin-block-start: 2rem;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// align
// —————————————————————————————————————————————————————————————————

.section_container {
  align-items: flex-start;
  text-align: left;
}

.section-center .section_container,
.section-center .section_header,
.section_content-center {
  align-items: center;
  text-align: center;
}

.section-center {

  .section_titleWrapper {
    justify-content: center;
  }
}

.section-end .section_container,
.section-end .section_header,
.section_content-end {
  align-items: flex-end;
  text-align: right;
}

.section-end {

  .section_titleWrapper {
    flex-direction: row-reverse;
  }
}

// —————————————————————————————————————————————————————————————————
// color
// —————————————————————————————————————————————————————————————————

@mixin section-color(
  $background-color,
  $title-color: variables.$primary,
  $color: variables.$text,
  $paper-color: variables.$background-paper,
  $border-color: variables.$border-color
) {
  background-color: $background-color;
  color: $color;

  & + & {

    .section_container {
      padding-block-start: 0;
    }
  }

  .section_title { color: $title-color; }
  .button-stroke { color: $color; }
  .snippet {
    border-color: $border-color;
  }

  a[href],
  area[href],
  input,
  input[type="checkbox"],
  input[type='radio'],
  select,
  textarea,
  button,
  iframe,
  [tabindex],
  [contentEditable=true] {

    &:focus-visible { outline-color: $color; }
  }
  
}

.section {
  &-default { @include section-color(variables.$background-default); }
  &-paper { @include section-color(variables.$background-paper); }
  &-primary { @include section-color(
    variables.$primary, // background-color
    variables.$primary-contrast, // title-color
    variables.$primary-contrast, // color
    variables.$hover-contrast, // paper-color
    variables.$primary-border-color // border-color
  ); }
  &-primaryLight { @include section-color(
    variables.$primary-light, // background-color
    variables.$text, // title-color
    variables.$text, // color
    variables.$hover-contrast, // paper-color
    variables.$border-color // border-color
  ); }
  &-secondary { @include section-color(
    variables.$secondary, // background-color
    variables.$secondary-contrast, // title-color
    variables.$secondary-contrast, // color
    variables.$hover-contrast, // paper-color
    variables.$secondary-border-color // border-color
  ); }
  &-secondaryLight { @include section-color(
    variables.$secondary-light, // background-color
    variables.$text, // title-color
    variables.$text, // color
    variables.$hover-contrast, // paper-color
    variables.$border-color // border-color
  ); }
}

// —————————————————————————————————————————————————————————————————
// level
// —————————————————————————————————————————————————————————————————

@mixin section-header-level($label-mb, $subtitle-mt, $actions-mt) {
  .section_label { margin-block-end: $label-mb; }
  .section_subtitle { margin-block-start: $subtitle-mt; }
  .section_actions { margin-block-start: $actions-mt; }
}

.section_header-1 { @include section-header-level(.75rem, 1.5rem, 2.5rem); }
.section_header-2 { @include section-header-level(.5rem, 1rem, 2rem); }
.section_header-3 { @include section-header-level(.25rem, .75rem, 1.5rem); }

// —————————————————————————————————————————————————————————————————
// landing (website title on homepage)
// —————————————————————————————————————————————————————————————————

.section-landing {

  .section {

    &_container {
      @include mixins.clamp(padding-block-start, 2rem, 10vw, 7rem);
      @include mixins.clamp(padding-block-end, 2rem, 10vw, 7rem);
    }

    &_label {
      margin-block-end: 1rem;

      @include mixins.responsive(down, tablet) {
        margin-block-end: 0.75rem;
      }
    }

    &_title {
      @extend %h1;
      max-width: variables.$desktop*0.5;
    }

    &_subtitle {
      @extend %h6;
      margin-block-start: 2rem;
      
      @include mixins.responsive(down, tablet) {
        margin-block-start: 1.5rem;
      }
    }

    &_actions {

      @include mixins.responsive(down, tablet) {
        margin-block-start: 3rem;
      }
    }
  }
}