@import "base";

.banner {
  p {
    a,
    a:visited,
    a:active {
      border-bottom: 1px dotted $color-text-secondary;
      color: $color-text-secondary;
      text-decoration: none;
    }

    a:hover {
      border-bottom: 1px solid $color-text-secondary;
      color: $color-text-secondary;
      text-decoration: none;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    color: $color-text-secondary;
  }

  a,
  a:hover {
    text-decoration: none;
  }

  .banner--rapid-router--content {
    @include _padding(30px, 0px, 30px, 0px);
  }
}

.banner--picture {
  height: 64 * $spacing;
  margin: 0 auto 0 70px;
  overflow: hidden;
  transform: rotate(120deg);
  visibility: hidden;
  width: 74 * $spacing;
}

.banner--picture__inside1 {
  height: 100%;
  overflow: hidden;
  transform: rotate(-60deg);
  width: 100%;
}

.banner--picture__inside2 {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transform: rotate(-60deg);
  visibility: visible;
  width: 100%;
}

.banner--picture--educate {
  background-image: url("../img/home_educate_hero.jpg");
}

.banner--picture--coding-club {
  background-image: url("../img/coding_club_hero.jpg")
}

.banner--picture--play {
  background-image: url("../img/home_play_hero.jpg");
}

.banner--picture--resources {
  background-image: url("../img/resources_hero.jpg");
}

.banner--picture--about {
  background-image: url("../img/about_us_hero.jpg");
}

.banner--picture--homelearning {
  background-image: url("../img/home_learning_hero.jpg");
}

.banner--picture--getinvolved {
  background-image: url("../img/get_involved_hero.png");
}

.banner--picture--contribute {
  background-image: url("../img/github_hero.png");
}

.banner--picture--help {
  background-image: url("../img/help_and_support_hero.jpg");
}

.banner--picture--tools {
  background-image: url("../img/teaching_resources_hero.jpg");
}

.banner--homepage {
  display: flex;
  justify-content: center;
  align-items: center;
  @include _padding(20px, 0px, 50px, 0px);

  h1 {
    margin-top: 0;
  }

  p {
    @include _font-size(22px);
    @include _margin(0px, 10px, 0px, 0px);
    padding: 0;
  }

  .button {
    @include _margin(0px, 20px, 7px, 0px);
  }
}

.banner--homepage--teacher,
.banner--teacher {
  background-color: $color-primary;
  background-position: top right;
}

.banner--homepage--student,
.banner--student {
  background-color: $color-tertiary;
  background-position: top left;
}

.banner--independent-student {
  background-color: $color-secondary;
  background-position: top left;
  color: $color-text-primary;

  .banner__text--primary,
  h4 {
    color: $color-text-primary;
  }
}

.banner-home-content {
  display: table;

  .banner-home-text {
    float: left;
    display: table-cell;
  }

  .banner-home-button {
    display: table-cell;
    vertical-align: bottom;
  }
}

.banner--game {
  @include _margin(8 * $spacing, auto, 0px, auto);
  @include _padding(15 * $spacing, 4 * $spacing, 15 * $spacing, 4 * $spacing);
  display: flex;
  justify-content: center;
  text-align: center;
  color: $color-text-secondary;

  + .banner--game {
    @include _margin(8 * $spacing, auto, 8 * $spacing, auto);
  }

  .banner--game__text {
    @include _padding(10px, 150px, 30px, 150px);
  }
}

.banner__text--primary {
  color: $color-text-secondary;
  @include _margin(60px, auto, 10px, auto);
}

.banner__text--secondary {
  color: $color-text-primary;
}

.banner--teacher,
.banner--student,
.banner--independent-student {
  align-items: center;
  display: flex;
  height: 64 * $spacing;
  justify-content: center;

  .banner__text--center {
    @include _padding(97.5px, 0px, 97.5px, 0px);
  }
}

.banner--student--plain {
  background-color: $color-background-play;
  background-image: none;
}

.banner--teacher--plain {
  @include _padding(20px, 0px, 50px, 0px);
  background-color: $color-primary;
  background-image: none;

  .progress-arrow__body--in-progress p {
    color: $color-background-tertiary;
  }
}

.banner--rapid-router {
  background-image: url("../img/rapid_router_landing_hero.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  img {
    width: 40%;
  }

  &.banner img {
    width: 25%;
  }
}

.banner--resources {
  @include _padding(0px, 0px, 30px, 0px);
  align-items: center;
  background-color: $color-primary;
  display: flex;
  justify-content: center;

  iframe {
    @include _margin(30px, 30px, 0px, 0px);
    height: 320px;
    width: 560px;
  }
}

.banner--error-page {
  @include _padding(100px, 0px, 100px, 10px);

  p {
    @include _font-size(24px);
  }
}

.banner__item {
  text-align: center;
}

@media (max-width: $tablet-large-max-width) {
  .banner {
    .col-sm-offset-2 {
      margin-left: 0;
    }
  }

  .banner--homepage {
    @include _padding(50px, 0px, 50px, 10px);
    .col-sm-11 {
      width: 100%;
    }
  }

  .banner-home-content {
    .banner-home-text {
      display: block;
    }

    .banner-home-button {
      float: right;
      margin-top: 20px;
    }
  }
}

@media (max-width: $tablet-small-min-width) {
  .banner--picture {
    margin: 0 auto 0 auto;
  }
}

@media (max-width: $mobile-max-width) {
  .banner--homepage {
    @include _padding(30px, 0px, 20px, 10px);
  }

  .banner {
    @include _padding(10px, 10px, 50px, 10px);
  }

  .banner--picture {
    display: none;
  }

  .banner--rapid-router {
    @include _padding(50px, 0px, 150px, 0px);
    flex-direction: column;

    .button {
      margin-bottom: 50px;
    }
  }

  .banner--game {
    .banner--game__text {
      @include _padding(10px, 50px, 30px, 50px);
    }
  }
}
