// ============================================================================
// :: Footer
// ============================================================================
/**
 * The main footer of the brandplatform. Containing a minimal amount of
 * information about the author of the platform.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-footer {
  padding: 4rem 0;

  @include respond-at($bp-breakpoint-tablet-base) {
    padding: 8rem 0 4rem;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-footer__text {
  text-align: center;

  @include respond-at($bp-breakpoint-desktop-base) {
    text-align: left;
  }
}

.bp-footer__company-link {
  position: relative;

  /**
   * no text-decoration was used because we need to animate the line,
   * the line is generated by :after
   */
  text-decoration: none;

  color: $bp-text-color-base;

  transition: color 0.15s ease-in-out;

  // usage of :after to create the line under the link
  &::after {
    content: "";

    position: absolute;
    // set bottom to -2px to drop the bottom line under the link
    bottom: -0.2rem;
    left: 0;

    width: 100%;
    height: 0.1rem;

    background-color: $bp-primary-color;
  }

  &:hover {
    color: $bp-primary-color;
  }
}