//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline";
@use "../../utilities/rtl" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/z-index" as *;

@mixin footer {
  .#{$prefix}--footer--bottom-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .#{$prefix}--footer {
    @include reset;
    @include font-family("sans");
    color: $neutral-neutral100-white;
    background-color: $brand-dark-blue-dark-blue20;
    z-index: z("footer");
    padding: calcRem(20px) 0;
    @media print {
      display: none;
    }
  }

  .#{$prefix}--footer__content {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    width: 100%;
    border-bottom: 1px solid $border-subtle;
  }

  .#{$prefix}--footer__info {
    display: flex;

    @media screen and (max-width: 600px) {
      flex-direction: column;
      text-align: center;
    }
  }

  .#{$prefix}--footer__sdg {
    //margin-top: 0.45rem;
    margin-left: $spacing-01; //$spacing-xl;
    width: 50px;
    height: 50px;
  }

  .#{$prefix}--footer__meta {
    @include type-style("body-short");
    font-size: calcRem(12px);
    margin-top: calcRem(10px);
    // font-style: italic;
    font-weight: 600;
    @include breakpoint-down(lg) {
      // display: none;
    }
  }

  .#{$prefix}--footer__info__item {
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    margin: 0;
    margin-right: calcRem(64px);
    @include rtl {
      margin-left: calcRem(64px);
      margin-right: 0;
    }

    @media screen and (max-width: 600px) {
      margin-right: 0;
      margin-bottom: calcRem(20px);
    }
  }

  .#{$prefix}--footer__info__item > .#{$prefix}--link {
    font-weight: 600;
  }

  .#{$prefix}--footer__info__item > .#{$prefix}--footer__label {
    // @include typescale('zeta');
    // @include line-height('body');
    @include type-style("label-02");
    font-weight: 600;
    margin: 0;
    color: $brand-wfp-blue-wfp-blue70;
  }

  .#{$prefix}--footer__cta {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;

    @include rtl {
      margin-left: 0;
      margin-right: auto;
    }
    .#{$prefix}--footer__cta-logo {
      fill: $text-inverse-default; // TODO: use new text color white token;
      width: calcRem(142px);
      height: calcRem(92px);

      @media screen and (max-width: 600px) {
        width: calcRem(120px);
      }
    }
  }

  .#{$prefix}--footer__secondary {
    font-size: calc(10px);
    text-align: end;

    @include breakpoint-down("md") {
      margin-bottom: calcRem(10px);
      display: inline;
    }
  }

  .#{$prefix}--theme-dark {
    .#{$prefix}--footer__cta-logo,
    .#{$prefix}--footer__cta-logo-small {
      filter: invert(1);
    }
  }

  @include breakpoint-down("md") {
    .#{$prefix}--footer__content {
      flex-direction: column;
    }
    .#{$prefix}--footer__cta {
      margin: auto;
      align-items: center;
    }
    .#{$prefix}--footer__meta {
      text-align: center;
    }
    .#{$prefix}--footer__cta-logo-small {
      display: none;
    }
    .#{$prefix}--footer__sdg {
      display: none;
    }
  }

  //breakpoint

  @include breakpoint("md") {
    .#{$prefix}--footer__cta-logo-small {
      display: none;
    }
  }

  .#{$prefix}--footer__info {
    display: flex;
  }

  /* External */

  .#{$prefix}--footer--external {
    @include breakpoint-down("md") {
      .#{$prefix}--footer__content {
        flex-direction: column;
      }
    }

    .#{$prefix}--footer__info {
      order: 1;
      @include breakpoint("md") {
        width: 40%;
      }
      // @include line-height('body');
      line-height: 1.5;
    }

    .#{$prefix}--footer__cta {
      margin-left: inherit;
      @include breakpoint-down("md") {
        display: flex;
        width: 100%;
        margin-bottom: calcRem(20px);
        justify-content: space-between;
        > img {
          margin-right: calcRem(30px);
        }
      }
      @include breakpoint("md") {
        margin-right: auto;
      }
    }

    .#{$prefix}--footer__info__item {
      @include typescale("delta");
      // @include line-height('body');
      line-height: 1.5;
      display: block;
      margin: 0;
      margin-right: calcRem(64px);
      @include rtl {
        margin-left: calcRem(64px);
        margin-right: 0;
      }
    }

    .#{$prefix}--footer__info__item > .#{$prefix}--link {
      font-weight: 600;
      margin-right: calcRem(10px);
      // @include typescale('zeta');
      @include breakpoint-down(lg) {
        display: block;
      }
    }

    .#{$prefix}--footer__secondary {
      margin-top: calcRem(20px);
      font-weight: 600 !important;
      @include type-style("caption-01");
      @include breakpoint(lg) {
        width: 100%;
      }
    }

    .#{$prefix}--footer__meta {
      @include typescale("zeta");
      font-size: calcRem(12px);
      // border-top: 1px solid $color__navy-gray-8;
      margin-top: $spacing-03;
      padding-top: $spacing-03;
      display: flex;
      justify-content: space-between;
      font-style: normal;
    }

    .#{$prefix}--footer__meta__links {
      .#{$prefix}--link {
        font-weight: 400;
      }
    }
  }
}