@import "../pages/mixins.css";

/* sizing for Loading component when loading the whole dang page */
#Canon > .loading {
  /* take up the whole screen */
  width: 100%;
  height: 100vh;
  /* center children */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* flex fallback */
  padding: 1rem var(--gutter) 4rem var(--gutter); /* account for logo whitespace */
  text-align: center;

  /* fudge logo into place on tall screens */
  @media (min-height: 500px) {
    margin-top: 6rem;
    & .loading-gobierno-label {
      margin-top: 10rem;
    }
  }
  @media (min-height: 800px) {
    margin-top: 8em;
  }
}

/* loading component defaults */
.loading {
  z-index: 100;
  color: var(--white);

  /* DataChile logo */
  & .loading-logo {
    /* death to beta */
    width: 200px;
    height: 121px;
    margin: 0 0 -24px 15px;
    clip-path: inset(0 0 40px 0);
  }

  /* progress bar */
  & .loading-progress-bar {
    width: 220px;
    max-width: 100%;
    margin: 0 auto 0.5rem auto;

    & .bp3-progress-meter {
      background: var(--accent) !important; /* override blueprint */
    }
  }

  & .loading-progress-text {
    color: var(--white);
    margin-bottom: 1em;
  }

  /* Gobierno */
  & .loading-gobierno-label {
    margin-top: 3rem; /* small screens only */
  }
  & .loading-gobierno-img {
    display: block;
    width: 10.5rem;
    max-width: 100%;
  }

  /* built by Datawheel */
  & .loading-builtby-link {
    /* positioning */
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25em;
    /* transitions */
    opacity: 0.75;
    transition: opacity 0.2s ease-out;

    /* Datawheel logo */
    & .loading-builtby-img {
      /* sizing */
      width: 7rem;
      /* fudged baseline alignment */
      top: 0.05rem;
    }

    /* interactions */
    &:hover, &:focus {
      opacity: 1;
    }
  }
}
