@import "import";

.footer {
  @include flex(column);
  background-color: color(background);
  color: color(gray-500);
  width: 100%;
  height: 100%;
  min-height: var(--footer-height);
  padding-top: spacer(sm);

  .inner {
    @include global-container(spacer(7));
    @include flex(column, $gap: spacer(7));

    @include breakpoint(small) {
      @include flex(row, space-between, $gap: spacer(3));
    }
  }

  .navList {
    @include flex(column, $gap: spacer(3));

    @include breakpoint(small) {
      flex-direction: row;
    }
  }

  .navList ul {
    @include flex(column, $gap: spacer(3));

    @include breakpoint(small) {
      flex-direction: row;
    }
  }

  .navList.social ul {
    @include flex(row, $gap: spacer(4));
  }

  li {
    @include flex;
  }

  .navLink,
  .copyright {
    @include type-item(small);
    text-align: center;
    color: color(text-secondary);
  }

  .navLink {
    &:hover {
      color: color(text);
    }

    &.social {
      @include type-item(body);
      color: color(text);

      svg {
        height: 1.1em;
        width: auto;
      }

      &:hover {
        color: color(gray-400);
      }
    }
  }
}