/**
 * Footers component
 * @define footer
 */

// Import base
@import '@ecl/ec-base/ec-base';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  ('ec-layout-grid', 'ec-component-link', 'ec-component-icon')
);

@mixin ecl-footer(
  $background-identity: $ecl-color-blue-25,
  $color-identity: $ecl-color-blue-100,
  $background-sections: $ecl-color-blue-75,
  $color-section: $ecl-color-white-100,
  $border-section: $ecl-color-blue-50,
  $background-common: $ecl-color-blue-100,
  $color-common: $ecl-color-white-100
) {
  .ecl-footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  /*
   * Back to top
   */
  .ecl-footer__back-to-top {
    align-self: flex-end;
    background-color: $background-sections;
    color: $color-section;
    display: none;
    font: $ecl-font-m;
    font-weight: $ecl-font-weight-bold;
    margin: 0;
    padding: $ecl-spacing-s $ecl-spacing-m;

    &:hover,
    &:focus {
      color: $color-section;
      outline-offset: -3px;
    }
  }

  .ecl-footer--custom .ecl-footer__back-to-top {
    background-color: $background-identity;
    color: $color-identity;

    &:hover,
    &:focus {
      color: $color-identity;
      outline-offset: -3px;
    }
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up('sm') {
    .ecl-footer__back-to-top {
      display: block;
    }
  }

  /*
   * Identity
   */
  .ecl-footer__identity {
    background-color: $background-identity;
    color: $color-identity;
    padding-bottom: $ecl-spacing-l;
    padding-top: $ecl-spacing-l;
  }

  .ecl-footer__identity-title {
    font: $ecl-font-m;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0;
  }

  .ecl-footer__identity-follow {
    display: flex;
    flex-wrap: wrap;
    font: $ecl-font-s;
  }

  .ecl-footer__identity-label {
    font: $ecl-font-m;
    font-weight: bold;
    margin-right: $ecl-spacing-xs;
    margin-top: $ecl-spacing-m;
  }

  .ecl-footer__identity-info {
    display: flex;
    flex-wrap: wrap;
  }

  .ecl-footer__identity-link {
    font: $ecl-font-s;
    margin-right: $ecl-spacing-xl;
    margin-top: $ecl-spacing-m;

    &:last-child {
      margin-right: 0;
    }
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up('md') {
    .ecl-footer__identity-follow,
    .ecl-footer__identity-info {
      margin-top: -($ecl-spacing-m);
    }
  }

  /*
   * Sections
   */
  .ecl-footer__sections {
    background-color: $background-sections;
    padding-bottom: $ecl-spacing-l;
  }

  .ecl-footer__section-title {
    border-bottom: 2px solid $border-section;
    color: $color-section;
    font: $ecl-font-m;
    font-weight: $ecl-font-weight-bold;
    margin-bottom: 0;
    margin-top: $ecl-spacing-l;
    padding-bottom: $ecl-spacing-s;
  }

  .ecl-footer__section-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  .ecl-footer__section-item {
    display: block;
    font: $ecl-font-s;
    margin-top: $ecl-spacing-m;
  }

  .ecl-footer__section-link {
    color: $color-section;

    &:hover,
    &:focus {
      color: $color-section;
    }
  }

  .ecl-footer__section-list--inline {
    display: inline-flex;
    flex-wrap: wrap;

    .ecl-footer__section-item {
      margin-right: $ecl-spacing-xl;
    }
    .ecl-footer__section-item:last-child {
      margin-right: 0;
    }
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up('md') {
    .ecl-footer__sections {
      padding-bottom: $ecl-spacing-xl;
    }

    .ecl-footer__section-title {
      margin-top: $ecl-spacing-xl;
    }
  }

  /*
   * Common
   */
  .ecl-footer__common {
    background-color: $background-common;
    color: $color-common;
    font: $ecl-font-s;
    padding-bottom: $ecl-spacing-l;
    padding-top: $ecl-spacing-l;
  }

  .ecl-footer__common-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -($ecl-spacing-m);
  }

  .ecl-footer__common-link {
    color: $color-common;
    margin-bottom: $ecl-spacing-m;
    margin-right: $ecl-spacing-xl;

    &:hover,
    &:focus {
      color: $color-common;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

// Use mixin
@include exports('ec-component-footer') {
  @include ecl-footer();
}