/*
 * Error Pages + Maintenance
 */

@mixin error-bg-gradient($color)
  background: linear-gradient(0deg, $color, $color 38.9%, $error-bg-gradient 39%, $white 60%, $white)

@mixin error-position-img($size:inherit, $pos:inherit)
  background:
    size: $size
    position: $pos

.application, .application > .error, .application > .error > .main
  min-height: 100vh


.error,
.maintenance
  height: 100%
  overflow: hidden

  .full-size
    position: absolute
    top: 0
    height: 100%
    width: 100%
    overflow: hidden
    background-repeat: no-repeat


.main--error
  min-height: 100%

.error-text,
.maintenance-text
  position: absolute
  top: 6%
  left: 0
  right: 0
  z-index: 10
  h1
    margin: 1em 0 .4em
    font-weight: 600
    color: $error-heading-color
    font-size: 40px
    line-height: 1
    text-align: center
    @media #{$medium-up}
      margin: 1.5em 0 .4em
      font-size: 70px
  p
    padding: 0 1em
    color: $error-copy-color
    font-size: 18px
    text-align: center
  a
    color: $error-copy-color
    &:hover,
    &:focus
      color: $error-copy-color
      text-decoration: underline

.icon-twitter
  display: inline-block
  width: 1.1em
  height: 1.1em
  background-image: url(../images/error/twitter.svg)
  background-repeat: no-repeat
  @include error-position-img(100% auto, 0 .2em)

.error500
  .error-bg
    @include error-bg-gradient($error-sand)
  .hill-left
    background-image: url(../images/error/500-hills-left.svg)
    @include error-position-img(auto 10vh, 0 58%)
    @media #{$medium-up}
      @include error-position-img(38vw auto, 0 58%)
  .hill-right
    background-image: url(../images/error/500-hills-right.svg)
    @include error-position-img(38vw auto, 99% 59%)
    display: none
    @media #{$medium-up}
      display: block
  .shadow-left
    background-image: url(../images/error/500-hills-shade-left.svg)
    @include error-position-img(24vw auto, 6% 72%)
  .shadow-right
    background-image: url(../images/error/500-hills-shade-right.svg)
    @include error-position-img(17vw auto, 95% 79%)
  .road
    background-image: url(../images/error/500-road.svg)
    @include error-position-img(auto 27vh, 42% 78%)
    @media #{$medium-up}
      @include error-position-img(auto 40vh, 42% 91.3%)

.error404

  .top
    position: absolute
    top: 0
    width: 100%
    z-index: 99

  .error-bg
    @include error-bg-gradient($error-hill-grey)
  .hill-left
    display: none
    background-image: url(../images/error/404-hills-left.svg)
    @include error-position-img(30vw auto, 0 58%)
    @media #{$medium-up}
      display: block
  .hill-right
    background-image: url(../images/error/404-hills-right.svg)
    @include error-position-img(auto 20vw, 99% 58%)
    @media #{$medium-up}
      @include error-position-img(50vw auto, 99% 58%)
    @media #{$large-up}
      @include error-position-img(50vw auto, 99% 54%)
  .error-excavator
    background-image: url(../images/error/excavator.svg)
    @include error-position-img(auto 25vh, 71% 83%)
  .error-travis
    background-image: url(../images/error/pensive-travis.svg)
    @include error-position-img(auto 60vh, 34% 100%)
    @media #{$medium-up}
      background-size: auto 50vh
    @media #{$large-up}
      background-size: auto 60vh


.maintenance
  .maintenance-bg
    @include error-bg-gradient($maintenance-grass)
  .hill-left
    background-image: url(../images/error/maintenance-hills-left.svg)
    @include error-position-img(80vw auto, 0 58%)
    @media #{$medium-up}
      @include error-position-img(58vw auto, 0 58%)
    @media #{$large-up}
      @include error-position-img(50vw auto, 0 56%)
  .hill-right
    background-image: url(../images/error/maintenance-hills-right.svg)
    @include error-position-img(38vw auto, 99% 59%)
    display: none
    @media #{$medium-up}
      display: block
  .shadow-left
    background-image: url(../images/error/maintenance-grass-shade-left.svg)
    @include error-position-img(24vw auto, 6% 72%)
  .shadow-right
    background-image: url(../images/error/maintenance-grass-shade-right.svg)
    @include error-position-img(17vw auto, 95% 79%)
  .maintenance-tractor
    background-image: url(../images/error/maintenance-tractor.svg)
    @include error-position-img(87vw auto, 63% 87%)
    @media #{$medium-up}
      @include error-position-img(auto 44vh, 63% 83%)

