packages/core/styles/components/footer.pcss

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
  --ifm-footer-color: inherit;
  --ifm-footer-link-color: var(--ifm-color-emphasis-700);
  --ifm-footer-link-hover-color: var(--ifm-color-primary);
  --ifm-footer-link-horizontal-spacing: 0.5rem;
  --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
  --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
  --ifm-footer-title-color: inherit;
}

.footer {
  background-color: var(--ifm-footer-background-color);
  color: var(--ifm-footer-color);
  padding: var(--ifm-footer-padding-vertical)
    var(--ifm-footer-padding-horizontal);

  @media print {
    display: none;
  }

  &--dark {
    --ifm-footer-background-color: #303846;
    --ifm-footer-color: var(--ifm-footer-link-color);
    --ifm-footer-link-color: var(--ifm-color-secondary);
    --ifm-footer-title-color: var(--ifm-color-white);
  }

  &__links {
    margin-bottom: 1rem;
  }

  &__link-item {
    color: var(--ifm-footer-link-color);
    line-height: 2;

    &:hover {
      color: var(--ifm-footer-link-hover-color);
    }
  }

  &__link-separator {
    margin: 0 var(--ifm-footer-link-horizontal-spacing);
  }

  &__logo {
    margin-top: 1rem;
    max-width: 10rem;
  }

  &__title {
    color: var(--ifm-footer-title-color);
    font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
      var(--ifm-font-family-base);
    margin-bottom: var(--ifm-heading-margin-bottom);
  }

  &__item {
    margin-top: 0;
  }

  &__items {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
  }

  @media (--ifm-narrow-window) {
    --ifm-footer-padding-horizontal: 0;

    &__link-separator {
      display: none;
    }

    &__col {
      margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
    }

    &__link-item {
      display: block;
    }
  }
}