/* site-container component file */
.site-container {
  display: grid;
  //IE doesn't support grid-gap
  grid-template-columns: 1fr 10px 300px;

  // context sensitive sidebar placement
  .sidebar {
    grid-column: 3;
  }
}

/* main component file */
.main {
  border: 1px dotted green;
}

/* sidebar component file */
.sidebar {

  // subscribe-form styles that only
  // apply when it is in the sidebar
  .subscribe-form {
    display: block;

    &__input {
      display: block;
      width: 100%;
      margin-bottom: 10px;
    }

    // Button styles that only apply
    // when it is both in the side bar
    // AND in the subscribe form
    .button {
      width: 100%;
    }
  }
}

/* subscribe-form component file */
.subscribe-form {
  display: grid;
  //Can't use grid-gap due to IE11 support
  grid-template-columns: 1fr 10px auto;
  border: 1px dotted #000;
  padding: 10px;

  &__input {
    border: 1px solid #000;
    padding: 10px;
  }

  // styling that only applies when the
  // button is in the subscribe form
  .button {
    grid-column: 3;
  }
}

/* button component file */
.button {
  /* styles that we want to appear on every button by default */
  padding: 10px;
  background: darkgreen;
  color: #fff;
  border: 0;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

/* resets file */
* {
  box-sizing: border-box;
}