/*  Last full read through 27/12/2020
 *
 *##############################################
 *# Landing sass        /_sass/env/landing.sass
 *##############################################
 *
 */

// Fallback for browsers that do not support Custom Properties
$landing-height: 100vh

.landing__page
  display: flex
  flex-direction: column
  height: $landing-height
  height: calc(var(--vh, 1vh) * 100)

.page__half
  align-items: flex-end
  display: flex
  height: 50vh
  width: 100vw

.env__text
  color: $white
  display: flex
  flex-direction: column

.landing__strap
  display: none

.landing__link
  color: $white
  text-decoration: none

.landing__title
  font-size: $font-size
  padding: 2rem 0
  text-align: center
  width: 100vw

.hero__overlay
  // additional css from glocal
  height: 50%
  position: absolute

.hero__filter
  @include image-filter--mix

.env--pwp
  background-color: $opd-orange-confidence

.env--clinician
  background-color: $opd-blue-confidence

@media screen and ( min-width: 768px )

  .landing__page
    flex-direction: row

  .page__half
    display: block
    height: 100vh
    width: 50vw

  .env__text
    flex-direction: column
    position: absolute
    top: 50vh
    transition: .6s ease-in-out

    &:focus-within > .landing__strap
      @include reveal-landing-strap

    &:hover > .landing__strap
      @include reveal-landing-strap

  .landing__strap
    display: flex
    flex-direction: column
    height: 0
    justify-content: space-around
    max-width: 400px
    overflow: hidden
    transition: .2s ease-in-out
    width: 40vw

  .landing__cta
    display: flex
    flex-direction: row
    justify-content: space-between

    > a
      align-self: center
      border-radius: 6px
      box-shadow: 0 20px 30px -15px rgba($pure-black, .6)
      padding: 1rem 0
      text-align: center
      text-decoration: none
      transition: .3s ease-in-out
      width: 40%

  .primary__cta
    background-color: $opd-blue-trust
    border: solid 1px $opd-blue-trust
    color: $opd-blue-confidence
    &:hover
      background-color: transparent
      color: $opd-blue-trust

  .secondary__cta
    background-color: transparent
    border: solid 1px $white
    color: $white
    &:hover
      background-color: $white
      color: $opd-blue-confidence

  .primary__cta, .secondary__cta
    &:hover
      box-shadow: 0 10px 15px -5px rgba($pure-black, .5)

  .env__text.env--pwp
    @include build-in(slide-from-left)
    border-radius: 6px 0 0 6px
    box-shadow: -12px 10px 10px -10px $grey
    right: 50%
    transform: translateX(0)
    &:hover
      box-shadow: -20px 20px 20px -10px $grey

  .env__text.env--clinician
    @include build-in(slide-from-right)
    border-radius: 0 6px 6px 0
    box-shadow: 12px 10px 10px -10px $grey
    left: 50%
    transform: translateX(0)
    &:hover
      box-shadow: 20px 20px 20px -10px $grey

  .landing__title
    width: auto
    padding: 3rem 2rem

  .hero__overlay
    width: 50%
    height: 100%
    top: 0

  .env--pwp
    .landing__title
      text-align: right

  .env--clinician
    .landing__title
      text-align: left



@include slide-from-right

@include slide-from-left