/* 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) brightness(1.3)
//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