@use "../../foundations/helpers/forward.helpers.scss" as *;

$ds-footer-row-gap-spacing-token: $ds-s-200;
$ds-footer-row-padding-spacing-token: $ds-s-100;
$ds-footer-column-gap: ds-spacing($ds-s-400);

.ds-footer {
  background-color: $ds-color-neutral-black;

  &__inner {
    color: $ds-color-neutral-white;
    padding: ds-spacing($ds-s-200 $ds-s-100);
    display: grid;
    margin: 0 auto;
  }

  @include ds-mq-smallest-breakpoint(tablet) {
    &__inner {
      padding: ds-spacing($ds-s-500);
    }
  }

  @include ds-mq-smallest-breakpoint(desktop) {
    &__inner {
      grid-template-columns: 1fr 1fr;
      grid-column-gap: $ds-footer-column-gap;
    }

    &__link-grid,
    &__logo,
    &__buttons {
      grid-column: 1 / span 2;
    }
  }

  &__logo,
  &__rudolf,
  &__editors,
  &__buttons {
    border-top-width: ds-border-width(xxs);
    border-top-style: solid;
    border-color: $ds-color-neutral-800;
  }

  @include ds-mq-smallest-breakpoint(desktop) {
    &__editors,
    &__rudolf {
      border: none;
    }

    &__link-grid {
      border-bottom-style: solid;
      border-bottom-width: ds-border-width(xxs);
      border-color: $ds-color-neutral-800;
    }
  }

  &__rudolf,
  &__editors {
    padding: ds-spacing($ds-footer-row-padding-spacing-token 0 $ds-footer-row-gap-spacing-token);

    &,
    p {
      @include ds-typography($ds-typography-functional-body-sm, $lineHeight: $ds-lineheight-lg);
    }

    p {
      padding: 0;
      margin: 0;
    }
  }

  &__rudolf {
    display: flex;

    img {
      min-width: 64px;
      margin: ds-spacing(0 $ds-s-100 0 0);
    }
  }

  &__link-grid {
    display: grid;
    grid-row-gap: ds-spacing($ds-footer-row-gap-spacing-token);
    justify-content: space-between;
    padding: ds-spacing(0 0 $ds-footer-row-gap-spacing-token);

    @include ds-mq-smallest-breakpoint(tablet) {
      grid-template-columns: repeat(3, auto);
      grid-column-gap: ds-spacing($ds-s-100);
    }

    @include ds-mq-smallest-breakpoint(desktop) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-column-gap: $ds-footer-column-gap;
    }

    h2 {
      margin: ds-spacing(0 0 $ds-s-100);
      @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-lg);
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-lg);

      li:not(:last-of-type) {
        margin: ds-spacing(0 0 $ds-s-050);
      }

      a {
        @include ds-link($ds-link-list);
        @include ds-focus($offset: 2px, $color: $ds-color-neutral-white);
      }
    }
  }

  &__logo {
    padding: ds-spacing($ds-footer-row-padding-spacing-token 0 0);
  }

  &__buttons {
    margin-top: ds-spacing($ds-footer-row-gap-spacing-token);

    button {
      margin: ds-spacing($ds-s-100 $ds-s-100 0 0);
      padding: 0;
      background-color: transparent;
      border: none;
      cursor: pointer;
      @include ds-typography($ds-typography-functional-body-sm, $lineHeight: $ds-lineheight-lg);
      @include ds-link($ds-link-list);
      @include ds-focus($offset: 2px, $color: $ds-color-neutral-white);
      @include ds-mq-smallest-breakpoint(tablet) {
        margin: ds-spacing($ds-s-100 $ds-s-150 0 0);
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  &.ds-force-px {
    .ds-footer__rudolf,
    .ds-footer__editors {
      &,
      p {
        @include ds-typography($ds-typography-functional-body-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
      }
    }
    .ds-footer__link-grid {
      h2 {
        @include ds-typography($ds-typography-functional-heading-xxs, true);
      }
      ul {
        @include ds-typography($ds-typography-functional-body-md, true);
      }
    }
    .ds-footer__buttons {
      @include ds-typography($ds-typography-functional-body-sm, true);
    }
  }
}