@import "../../base";

@include govuk-exports("idsk/component/footer") {

  $govuk-footer-background: $govuk-canvas-background-colour;
  $govuk-footer-border: $govuk-border-colour;
  // This variable can be removed entirely once the legacy palette goes away,
  // as it'll just be the same as $govuk-footer-border.
  $govuk-footer-border-top: $govuk-border-colour;
  $govuk-footer-text: $govuk-text-colour;
  $govuk-footer-link: $govuk-link-colour;
  $govuk-footer-link-hover: $govuk-focus-text-colour;

  // Footer logo size
  $idsk-footer-logo-width: 218px !default;
  $idsk-footer-logo-height: 47px !default;

  @if ($govuk-use-legacy-palette) {
    // sass-lint:disable no-color-literals
    $govuk-footer-border-top: #a1acb2;
    $govuk-footer-border: govuk-colour("grey-2");
    $govuk-footer-text: #454a4c;
    $govuk-footer-link: $govuk-footer-text;

    // Only used with the legacy palette
    $govuk-footer-link-hover: #171819;
  }

  // Based on the govuk-crest-2x.png image dimensions.
  $govuk-footer-crest-image-width-2x: 250px;
  $govuk-footer-crest-image-height-2x: 204px;
  // Half the 2x image so that it fits the regular 1x size.
  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);

  .idsk-footer {
    @include govuk-font($size: 16);
    @include govuk-responsive-padding(7, "top");
    @include govuk-responsive-padding(5, "bottom");

    border-top: 1px solid $govuk-footer-border-top;
    color: $govuk-footer-text;
    background: $govuk-footer-background;
  }

  .idsk-footer__link {
    @if ($govuk-use-legacy-palette) {
      &:link,
      &:visited {
        color: $govuk-footer-link;
      }

      &:hover,
      &:active {
        color: $govuk-footer-link-hover;
      }
    } @else {
      &:link,
      &:visited,
      &:hover,
      &:active {
        color: $govuk-footer-link;
      }
    }

    &:focus {
      @include govuk-focused-text;
    }

    // alphagov/govuk_template includes a specific a:link:focus selector
    // designed to make unvisited links a slightly darker blue when focussed, so
    // we need to override the text colour for that combination of selectors.
    @include govuk-compatibility(govuk_template) {
      &:link:focus {
        @include govuk-text-colour;
      }
    }
  }

  // Internet Explorer 8 does not support `:not()` selectors, so don't conditionally show underlines.
  @include govuk-not-ie8 {
    .idsk-footer__inline-list .idsk-footer__link,
    .idsk-footer__list .idsk-footer__link {
      text-decoration: none;

      &:hover:not(:focus),
      &:active:not(:focus) {
        text-decoration: underline;
      }
    }
  }

  .idsk-footer__section-break {
    margin: 0; // Reset `<hr>` default margins
    @include govuk-responsive-margin(8, "bottom");
    border: 0; // Reset `<hr>` default borders
    border-bottom: 1px solid $govuk-footer-border;
  }

  .idsk-footer__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; // Support: Flexbox
    margin-right: -$govuk-gutter-half;
    margin-left: -$govuk-gutter-half;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; // Support: Flexbox
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; // Support: Flexbox
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; // Support: Flexbox
  }

  .idsk-footer__meta-item {
    margin-right: $govuk-gutter-half;
    margin-bottom: govuk-spacing(5);
    margin-left: $govuk-gutter-half;
  }

  .idsk-footer__meta-item--grow {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; // Support: Flexbox
    @include mq ($until: tablet) {
      -ms-flex-preferred-size: 320px;
          flex-basis: 320px; // Support: Flexbox
    }
  }

  .idsk-footer__licence-logo {
    display: inline-block;
    margin-right: govuk-spacing(2);
    @include mq ($until: desktop) {
      margin-bottom: govuk-spacing(3);
    }
    vertical-align: top;

    & > * {
      width: $idsk-footer-logo-width;
      height: $idsk-footer-logo-height;
    }
  }

  .idsk-footer__licence-description {
    display: inline-block;
    margin-bottom: govuk-spacing(3);
  }

  .idsk-footer__copyright-logo {
    display: inline-block;
    min-width: $govuk-footer-crest-image-width;
    padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
    background-image: idsk-image-url("govuk-crest.png");
    @include govuk-device-pixel-ratio {
      background-image: idsk-image-url("govuk-crest-2x.png");
    }
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .idsk-footer__inline-list {
    margin-top: 0;
    margin-bottom: govuk-spacing(3);
    padding: 0;
  }

  .idsk-footer__meta-custom {
    margin-bottom: govuk-spacing(4);
  }

  .idsk-footer__inline-list-item {
    display: inline-block;
    margin-right: govuk-spacing(3);
    margin-bottom: govuk-spacing(1);
  }

  .idsk-footer__heading {
    @include govuk-responsive-margin(7, "bottom");
    padding-bottom: govuk-spacing(4);
    @include mq ($until: tablet) {
      padding-bottom: govuk-spacing(2);
    }
    border-bottom: 1px solid $govuk-footer-border;
  }

  .idsk-footer__navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; // Support: Flexbox
    margin-right: -$govuk-gutter-half;
    margin-left: -$govuk-gutter-half;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; // Support: Flexbox
  }

  .idsk-footer__section {
    display: inline-block;
    margin-right: $govuk-gutter-half;
    margin-bottom: $govuk-gutter;
    margin-left: $govuk-gutter-half;
    vertical-align: top;
    // Ensure columns take up equal width (typically one-half:one-half)
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; // Support: Flexbox
    -ms-flex-negative: 1;
        flex-shrink: 1; // Support: Flexbox
    @include mq ($until: desktop) {
      // Make sure columns do not drop below 200px in width
      // Will typically result in wrapping, and end up in a single column on smaller screens.
      -ms-flex-preferred-size: 200px;
          flex-basis: 200px; // Support: Flexbox
    }
  }

  // Sections two-third:one-third on desktop
  @include mq ($from: desktop) {
    .idsk-footer__section:first-child {
      -webkit-box-flex: 2;
          -ms-flex-positive: 2;
              flex-grow: 2; // Support: Flexbox
    }
  }

  .idsk-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-column-gap: $govuk-gutter;
       -moz-column-gap: $govuk-gutter;
            column-gap: $govuk-gutter; // Support: Columns
  }

  @include mq ($from: desktop) {
    .idsk-footer__list--columns-2 {
      -webkit-column-count: 2;
         -moz-column-count: 2;
              column-count: 2; // Support: Columns
    }

    .idsk-footer__list--columns-3 {
      -webkit-column-count: 3;
         -moz-column-count: 3;
              column-count: 3; // Support: Columns
    }
  }

  .idsk-footer__list-item {
    @include govuk-responsive-margin(4, "bottom");
  }

  .idsk-footer__list-item:last-child {
    margin-bottom: 0;
  }
}