@use 'uswds-core' as uswds;
@use 'variables' as *;

footer {
  background-color: $usgs-blue;
  padding: 1em 0;

  // Put the header bar in a container and control the width of that container so that it will not stretch the whole width of the page
  .usgs-footer-container {
    @include uswds.grid-container(uswds.$theme-grid-container-max-width);
  }

  .usgs-footer-nav {
    // Add some space around the vertical dividing lines
    padding: 1em 0 .5em 0;
    // color the vertical dividing lines
    color: uswds.color('white');
    // Add a line between the upper and lower row of links
    &:first-of-type {
      border-bottom: solid 1px color('white');
      padding-top: 0;
    }
    .social-media-links {
      @include uswds.at-media('desktop') {
        padding: 0;
        float: right;
      }
      padding: .5em .5em 0 .5em;
      display:inline-block;
      span {
        vertical-align: top;
      }
      a {
        svg {
          color: uswds.color('white');
        }
      }
    }
  }

  // Add style to the actual links in the footer
  .usgs-footer-link {
    display: inline-block;
    padding-left: .5em;
    padding-right: .5em;
    color: uswds.color('white');
    text-decoration: none;

    // Keep the links the same color after they are click as they were before.
    &:visited {
      color: uswds.color('white');
    }
  }
}