/*  Last full read through 27/12/2020
 *
 *##############################################
 *# Global mixins            /_sass/_mixins.sass
 *##############################################
 *
 */

@import '_functions'

// ##############################################

// Image filters

// Applied to the actual image with background-color: $env-primary
@mixin image-filter--mix
  filter: grayscale(1) contrast(.2) brightness(1.8)
  opacity: .6

@mixin image-filter-rotate
  mix-blend-mode: screen
  filter: grayscale(1)
  //contrast(.5) brightness(1.3) sepia(.6) hue-rotate(180deg) opacity(.5)

// Applied to an overlaying div
@mixin image-filter--blur
  backdrop-filter: blur(8px)
  background-color: rgba($env-primary, .5)


// ##############################################

// Landing page animations - hover and focus

@mixin reveal-landing-strap
  height: auto
  max-height: 400px


// Snappy build function, see /_sass/_variables.sass for $bezier-snap
@mixin build-in($name)
  animation: .8s $bezier-snap 0s 1 $name

@mixin default-trans
  transition: all .4s ease-in-out

// Keyframes
@mixin slide-from-left
  @keyframes slide-from-left
    0%
      opacity: 0
      transform: translateX(-50vw)

    100%
      opacity: 1
      transform: translateX(0)


@mixin slide-from-right
  @keyframes slide-from-right
    0%
      opacity: 0
      transform: translateX(50vw)

    100%
      opacity: 1
      transform: translateX(0)


// Logo using the OPD primary colors
@mixin logo-primary-colors
  .site__logo--group
    .site__logo--curve
      fill: $opd-coral
    .site__logo--legvert
      fill: $opd-blue
    .site__logo--leg45
      fill: $opd-light-blue
    .site__logo--g,
    .site__logo--a,
    .site__logo__i,
    .site__logo--t
      fill: $opd-blue
    .site__logo--Q
      fill: $opd-coral



// Logo single color function
@mixin logo-color($color)
  .site__logo--group,
    .site__logo--curve,
    .site__logo--legvert,
    .site__logo--leg45,
    .site__logo--g,
    .site__logo--a,
    .site__logo__i,
    .site__logo--t,
    .site__logo--Q
      fill: $color


@mixin footer-bg($footer-bg-color)
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='1278' height='600' %3E%3Cpath d='M1019,600 C1019,600 1019,600 1019,600 C1019,600 1279,600 1279,600 C1279,600 1279,0 1279,0 C1279,0 413,0 413,0 C413,0 413,0 413,0' fill= '#{url-friendly-colour($footer-bg-color)}' fill-opacity='0.99'/%3E%3Cpath d='M1220,600 C1220,600 0,600 0,600 C0,600 0,0 0,0 C0,0 414,0 414,0 C414,0 1020,600 1020,600' fill= '#{url-friendly-colour($footer-bg-color)}' /%3E%3C/svg%3E")
  background-position: center
  background-size: cover


@mixin text-shadow
  text-shadow: 3px 3px 6px rgba($pure-black, .2)


@mixin navbar-color
  backdrop-filter: blur(20px)
  background-color: $secondary-navbar-color