@import (reference) "../variables/neptune-tokens.less";
@import (reference) "../less/core/_typography.less";

.footer {
  background-color: var(--color-background-neutral);
  .np-text-body-default;

  padding-top: calc(var(--size-8) * 10);
  padding-bottom: calc(var(--size-8) * 10);

  @media (--screen-sm) {
    padding-top: calc(var(--size-8) * 15);
    padding-bottom: calc(var(--size-8) * 15);
  }

  @media (--screen-lg) {
    padding-top: calc(var(--size-8) * 20);
    padding-bottom: calc(var(--size-8) * 20);
  }

  .footer-link,
  .link-icon {
    color: var(--color-content-secondary);
    .np-text-body-default;

    &:hover,
    &:active,
    &:focus {
      color: var(--color-content-secondary);
    }
  }

  .footer-title {
    color: var(--color-content-primary);

    .footer-link {
      color: var(--color-content-primary);

      &:hover,
      &:active,
      &:focus {
        color: var(--color-content-primary);
      }
    }
  }

  .logo {
    color: transparent;
  }

  .icon {
    margin: 0 5px;
    font-size: 32px !important;
    width: 24px;
  }

  .link-icon {
    text-decoration: none;

    svg {
      fill: var(--color-content-secondary);

      &:hover,
      &:active,
      &:focus {
        fill: var(--color-content-secondary);
      }
    }
  }

  &.footer-inverse {
    background: @color-navy-background-elevated;

    .footer-link,
    .link-icon {
      color: @color-navy-content-primary;

      &:hover,
      &:active,
      &:focus {
        color: @color-navy-content-primary;
      }

      svg {
        fill: @color-navy-content-primary;

        &:hover,
        &:active,
        &:focus {
          fill: @color-navy-content-primary;
        }
      }
    }

    .footer-title {
      color: @color-navy-content-primary;
    }

    hr {
      opacity: 0.1;
    }

    .tiny,
    .body-3,
    .np-text-body-default {
      color: @color-navy-content-primary;
    }
  }

  @media (--screen-xs-max) {
    position: relative;
  }
}