@import '../../../@theme/styles/themes';

@include nb-install-component() {

  $text-fg: nb-theme(footer-text-color);
  $icon-color: nb-theme(footer-icon-color);
  $title-fg: nb-theme(color-fg-heading);

  display: flex;
  flex: 1;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  justify-content: space-around;

  > div {
    display: flex;
    margin-right: 0;
    justify-content: center;
    width: 100%;
    &:last-child {
      margin-right: 0;
    }

    ul {
      list-style: none;
      padding-left: 0;
    }

    li {
      display: flex;
      margin-bottom: 1rem;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    &.logo {
      display: none;
    }

    .title {
      color: $title-fg;
      font-size: 1.125rem;
      font-weight: bold;
      line-height: 1.375rem;
    }

    .copy {
      color: $text-fg;
      display: list-item;
      font-size: 0.75rem;
    }

    .social {
      display: flex;
      flex-direction: row;
      a {
        color: $icon-color;
        margin-right: 1rem;

        nb-icon {
          font-size: 3rem;
        }
      }
    }
  }

  > div.logo {
    display: none;
  }

  @include media-breakpoint-up(md) {
    > div {
      justify-content: flex-start;
      margin-right: 2rem;
      width: auto;

      li {
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
      }
    }
  }

  @include media-breakpoint-up(lg) {
    > div.logo {
      display: flex;
      flex-direction: column;
      margin-top: -2.5rem;
      text-align: center;
      justify-content: center;

      img {
        max-width: 9rem;
      }
    }
  }
}