@use '../../global/scss/tools' as nsw;

.nsw-footer {
  hr {
    margin: nsw.rem(16px) 0;
    height: 1px;
    border: 0;
    background-color: var(--nsw-grey-03);
  }

  a:not(.nsw-icon-button) {
    line-height: 1.5;
    padding: nsw.rem(8px) nsw.rem(24px) nsw.rem(8px) 0;

    @include nsw.breakpoint('md') {
      padding: nsw.rem(4px) nsw.rem(4px) nsw.rem(4px) 0;
    }
  }

  &__upper {
    background-color: var(--nsw-white);
    border-top: solid 1px var(--nsw-grey-03);
    padding-top: nsw.rem(24px);

    .nsw-container {
      padding-left: nsw.rem(8px);
      padding-right: nsw.rem(8px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      @include nsw.breakpoint('lg') {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  &__group {
    padding: 0 nsw.rem(8px) nsw.rem(16px) nsw.rem(8px);
    flex: 1 0 auto;
    min-width: nsw.rem(256px);
    max-width: 50%;

    @include nsw.breakpoint('md') {
      flex-basis: 50%;
      min-width: auto;
    }

    @include nsw.breakpoint('lg') {
      padding: 0 nsw.rem(16px) nsw.rem(24px) nsw.rem(16px);
      flex-basis: 25%;
    }

    ul {
      list-style: none;
      margin: nsw.rem(4px) 0 0 0;
      padding: 0;

      @include nsw.font-size('xs');

      a {
        font-weight: var(--nsw-font-normal);
      }
    }

    li:first-child {
      margin-top: 0;
    }
  }

  &__heading {
    @include nsw.font-size('sm');
  }

  &__lower {
    background-color: var(--nsw-grey-01);
    color: var(--nsw-text-light);
    padding: nsw.rem(16px) 0 nsw.rem(24px) 0;

    @include nsw.font-size('xs');

    a {
      @include nsw.link-light;
    }

    p {
      margin: nsw.rem(12px) 0;
    }

    ul {
      list-style: none;
      margin: nsw.rem(16px) nsw.rem(-8px) 0 nsw.rem(-8px);
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      @include nsw.breakpoint('md') {
        margin-left: 0;
        margin-right: 0;
      }
    }

    li {
      flex: 1 0 50%;
      max-width: 50%;
      padding: 0 nsw.rem(8px);
      margin: 0 0 nsw.rem(16px) 0;

      @include nsw.breakpoint('md') {
        margin-right: nsw.rem(24px);
        padding: 0;
        flex: 0 0 auto;
        max-width: none;
      }
    }
  }

  &__links {
    @include nsw.breakpoint('md') {
      display: flex;
      justify-content: space-between;
      margin-top: nsw.rem(-16px);
    }
  }

  &__acknowledgement {
    padding-bottom: nsw.rem(12px);

    @include nsw.font-size('sm');
  }

  &__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 nsw.rem(-12px);
    padding: nsw.rem(8px) 0 nsw.rem(12px) 0;

    @include nsw.breakpoint('md') {
      padding-bottom: nsw.rem(8px);
    }

    a {
      margin: 0 nsw.rem(4px);
    }
  }

  &__info {
    @include nsw.breakpoint('md') {
      display: flex;
      flex-wrap: nowrap;
    }
  }

  &__copyright {
    flex: 1 1 auto;
    margin: nsw.rem(12px) 0;
  }

  &__built {
    flex: 0 0 nsw.rem(200px);
    margin: nsw.rem(12px) 0;

    @include nsw.breakpoint('md') {
      text-align: right;
    }
  }

  &--dark {
    .nsw-footer__lower {
      background-color: var(--nsw-brand-dark);
    }
  }

  &--light {
    hr {
      background-color: var(--nsw-grey-02);
    }

    .nsw-footer__lower {
      background-color: var(--nsw-brand-light);
      color: var(--nsw-text-dark);

      a {
        @include nsw.link-dark;
      }
    }
  }
}