// Page footer styles.
@import "../../defaults";   // Global component defaults.

footer.footer {
  background-color: shade-color($primary, 40%);
  color: var(--bs-white);

  a {
    color: var(--bs-white);
    text-decoration: none;

    &:hover,
    &:focus,
    &:active {
      color: var(--bs-white);
      text-decoration: underline;
    }
  }

  p {
    a {
      text-decoration: underline;

      &:hover,
      &:focus,
      &:active {
        transition: text-decoration 0.4s;
        text-decoration: none;
      }
    }
  }

  .footer-logo-image {
    height: 1.88rem;
  }
}

.sitemap-menu {
  .nav-item {
    a.nav-link {
      position: relative;
      color: var(--bs-white);
      text-decoration: none;

      &:hover,
      &:focus,
      &:active {
        color: var(--bs-white);

        &:after {
          position: absolute;
          content: "";
          top: 80%;
          left: 0;
          transition: width 0.3s;
          width: 2.4rem !important;
          height: 1px;
          bottom: 0;
          background-color: var(--bs-white);
        }
      }

      &.is-active {
        &:after {
          position: absolute;
          content: "";
          top: 80%;
          left: 0;
          width: 1.3rem;
          height: 1px;
          bottom: 0;
          background-color: var(--bs-white);
        }
      }
    }
  }
}

.social-media-menu-icons li.nav-item > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: var(--bs-white);
  text-decoration: none;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: -9999px !important;

  &::before {
    display: inline-block;
    margin: 0;
    font-size: 1.5rem;
    color: var(--bs-white);
    letter-spacing: normal;
  }

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;

    &::before {
      color: tint-color($primary, 80%);
    }

    &:after {
      display: none;
    }
  }
}
