@import "../pages/mixins";

.footer {
  width: 100%;
  background-color: var(--black);

  /* -------------------------------------
  main layout
  ------------------------------------- */

  /* main container sizing & layout */
  & .footer-main-container {
    /* line up content edges */
    padding: var(--gutter);

    /* side by side layout on all but tiny screens */
    @add-mixin from-xx {
      & .footer-logo-item {
        padding-right: 2rem;
      }
      & .footer-partner-logo-container .footer-logo-list {
        display: flex;
        flex-wrap: wrap;

        & .footer-logo-item {
          flex: 1 0 50%;
        }
      }
    }

    @add-mixin from-xs {
      /* align children */
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      /* give the container more breathing room */
      padding-top: 3rem;
      padding-bottom: 3rem;

      /* nav column */
      & .footer-nav {
        width: 14rem;
      }

      /* stretchy logo column */
      & .footer-logo-container {
        width: calc(100% - 14rem - var(--gutter));
        /* max-width: 66rem; */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
      }
    }

    /* bring dev logo up on small/medium screens */
    @media (min-width: 480px) and (max-width: 1199px) {
      /* move project by / built by to top row, equal width */
      & .footer-gobierno-logo-container,
      & .footer-dev-logo-container {
        flex: 1 0 50%;

        /* line up with nav heading */
        & .footer-logo-heading {
          margin-top: 0;
        }
      }
      /* partner logos fill up 100% of the space */
      & .footer-partner-logo-container {
        order: 1;
        width: 100%;
      }
    }

    /* enough room for four columns of partner logos */
    @mixin from-sm {
      /* stupidly long selector required due to specificity from nesting */
      & .footer-partner-logo-container .footer-logo-list .footer-logo-item {
        flex: 1 0 25%;
      }
    }

    /* enough room for everything to be in its own column */
    @add-mixin from-lg {
      /* scale down links because reasons */
      & .footer-nav-list {
        @add-mixin font-xs;

        & .footer-nav-item {
          line-height: 1;
          margin-top: -0.25em;
        }
      }

      /* prevent wrapping; size columns */
      & .footer-logo-container {
        flex-wrap: nowrap;

        /* 1st & last column sizing */
        & .footer-gobierno-logo-container,
        & .footer-dev-logo-container {
          flex: 1 1 20%;
        }
        /* middle column sizing */
        & .footer-partner-logo-container {
          flex: 6 6 60%;
          /* spacing */
          margin-left: 3rem;
          margin-right: 1rem;
          /* center with middle column */
          text-align: center;
        }
        /* right aligned dev label */
        & .footer-dev-logo-container {
          text-align: right;

          /* reset padding to align with right content edge */
          & .footer-logo-item {
            padding-right: 0;
          }
        }
      }
      /* align & scale down headings */
      & .footer-nav-heading,
      & .footer-logo-heading {
        @add-mixin font-sm;
        margin-top: 0;
      }
    }
  }

  /* -------------------------------------
  footer nav
  ------------------------------------- */

  /* link style */
  & .footer-nav-link {
    @add-mixin nav-link;

    /* disabled "link"; coming soon */
    &.is-disabled {
      opacity: 0.333;
      pointer-events: none;
    }
  }

  /* current page */
  /* NOTE: there's some silly logic here to work around the way
  the react-router Link `activeClassname` prop
  deals with inheritence */
  & .footer-nav-item:not(:first-of-type) .footer-nav-link.is-active,
  & .footer-nav-item:first-of-type .footer-nav-link.is-home {
    color: var(--accent);
    opacity: 1;
  }

  /* -------------------------------------
  logos
  ------------------------------------- */

  /* adjust logo heading spacing */
  & .footer-logo-heading {
    margin-bottom: 0.75em; /* override blueprint */
    margin-top: 2rem; /* space out headings */
    color: var(--white);

    @add-mixin from-md {
      margin-bottom: 0.25em;
    }
  }

  /* space out logos */
  & .footer-logo-item {
    margin-bottom: 0.5rem;
  }

  /* limit logo size */
  & .footer-logo-img {
    width: 8rem;
    max-width: 100%;
  }

  /* logo interactions */
  & .footer-logo-link {
    opacity: 0.666;

    &:hover, &:focus {
      opacity: 1;
    }
  }

  /* -------------------------------------
  feedback
  ------------------------------------- */

  /* feedback container */
  & .footer-feedback-container {
    /* align with content edge */
    padding: 1.25rem var(--gutter-half); /* make up with link padding */
    text-align: center;
    /* theming */
    background-color: var(--dark-3);

    /* feedback list items */
    & .footer-feedback-item {
      display: inline-block;
      padding: 0 var(--gutter-half);

      /* add bullet between adjacent feedback items */
      &:not(:last-of-type) {
        margin-right: 1em; /* increase spacing */

        &:after {
          content: '•';
          position: absolute;
          right: -0.625em;
        }
      }
    }

    /* feedback links */
    & .footer-feedback-link {
      @add-mixin nav-link;
    }

    /* move feedback to bottom right corner */
    @add-mixin from-lg {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
