.Footer {
  font-weight: var(--font-weight-regular);
  background-color: var(--color-neutral-700);
  color: white;

  & .Section--darkGrey {
    & .Section-TextConstraint:last-child {
      margin-bottom: var(--space-5x);
    }

    & .Section-TextConstraint:first-child {
      margin-top: var(--space-5x);
    }

    & .u-inlineList {
      color: var(--color-neutral-700);
    }
  }
}

.Footer-bar {
  display: flex;
  align-items: center;

  padding: var(--space-2x);
  font-size: var(--font-size-tiny);
}

.Footer-section {
  width: 100%;
}

.Footer-section .DoodleLogo {
  vertical-align: middle;
}

.Footer-section--left {
  text-align: left;

  & .Link:first-child {
    display: block;
  }

  & .Link:not(:first-child):not(:last-child)::after {
    content: " • ";
    margin: 0 var(--space);
    display: inline-block;
  }
}

.Footer-section--center {
  text-align: center;
}

.Footer-section--right {
  text-align: right;

  & .Link:not(:last-child) {
    margin-right: var(--space-2x);
  }
}

/**
 * Adjusting heart icon
 */
.Footer .HeartIcon {
  width: auto;
  margin: -0.1em 0;
}

.Footer-links {
  display: inline;
}

@media (--small-device) {
  .Footer-bar {
    flex-direction: column-reverse;
    padding: var(--space-4x) var(--space-2x);
  }

  .Footer-links {
    display: block;
  }

  .Footer-section {
    width: auto;

    /* Because of reverse order we apply to first child instead of last */
    &:not(:first-child) {
      margin-bottom: var(--space-2x);
      text-align: center;
    }

    & .LanguageMenu {
      margin-bottom: var(--space-2x);
    }
  }

  .Footer-section--left {
    text-align: center;
  }

  .Footer-section--center {
    color: white;
  }

  .Footer-logo-text {
    display: none;
  }
}