@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
@import url(~elements-sk/colors.css);

/*

To style app-sk you can change the values of the CSS variables:


  app-sk {
    --header-background-color: #5ba17f;
    --sidebar-width: 250px;
  }

Note that app-sk is more specific than :root so the above variables will
over-ride the defaults regardless of the processing order of the CSS files.

*/

:root {
  --sidebar-width: 200px;
  --sidebar-horiz-padding: 5px;
  --sidebar-background-color: var(--on-primary, --white);

  --header-height: 50px;
  --header-background-color: var(--primary, --blue);
  --header-font-color: var(--on-primary, --white);

  --content-horiz-padding: 5px;

  --footer-height: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

app-sk {
  color: var(--on-background, --black);
  background: var(--background, --white);
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
}

app-sk > {
  header {
    background: var(--header-background-color);
    padding: 0 0.5em;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    color: var(--header-font-color);

    grid-column: 1 / span 2;
    grid-row: 1;
  }

  header > * {
    margin: auto; /* Center things vertically */
  }

  aside {
    border-right: 1px solid var(--on-surface, #ddd);
    padding: 0 var(--sidebar-horiz-padding);
    z-index: 2;
    background-color: var(--sidebar-background-color);

    grid-column: 1;
    grid-row: 2;
  }

  main {
    padding: 0 var(--content-horiz-padding);
    overflow-y: auto;

    grid-row: 2;
  }

  footer {
    grid-area: footer;

    grid-column: 1 / span 2;
    grid-row: 3;
  }

  @media screen and (min-width: 480px) {
    header > .toggle-button {
      display: none;
    }

    main {
      grid-column: 2;
    }
  }

  @media screen and (max-width: 480px) {
    header > .toggle-button {
      display: block;
      background-color: transparent;
      border: none;
    }

    /* Hide the sidebar just off screen. Then, when it is toggled on and off,
       the transitions will make it slide between the two states. */
    aside {
      position: relative;
      left: calc(-var(--sidebar-width) - 2 * var(--sidebar-horiz-padding));
      transition: 0.5s;
    }

    aside.shown {
      left: 0;
      transition: 0.5s;
    }

    main {
      grid-column: 1 / span 2;
    }
  }
}

app-sk {
  .spacer {
    flex-grow: 1;
  }
}