/* ==========================================================================
   Expend Basic style settings
   ========================================================================== */

/*
 * Set up the html
 *
 * 1. Makes sue that some fonts are better rendered
 */

html
  -webkit-font-smoothing: antialiased /* 2 */
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility 


/*
 * Set up the body
 *
 * 1. Set font to lining figures
 */

body
  margin: 0

  font-family: $fontCabin
  line-height: 1.6

  font-feature-settings: 'lnum' /* 1 */

/*
 * Set default settings for all elements
 *
 * 1. Default selection styling
 *
 */
*
  ::selection /* 2 */
    background: $blue
    color: white

/**
 * 1.Default display for images is block to lose the extra margin below the image
 */
img
  opacity: 1
  transition: opacity 0.3s

  &.preload
    opacity: 0

/*
 * Set default styling for input and textarea
 *
 * 1. Set font because else the agent will overrule them with an ugly font
 */
input, textarea
  font-family: $fontCabin
/* 1 */

/*
 * Set default styling for a button
 *
 */
.button
  position: relative
  display: inline-block
  padding: 15px 25px
  border: 2px solid $bisqueLight
  border-radius: 10px
  color: $darkBlue
  font-size: 0.8rem
  font-family: $fontDroidSans
  line-height: 1.2
  overflow: hidden
  z-index: 0
  text-transform: uppercase
  text-decoration: none
  transition: box-shadow 0.4s ease-out

  //
  &::after
    position: absolute
    content: ''
    height: 300%
    width: 150%
    left: -200%
    bottom: -100%
    z-index: -1
    background-color: rgba($bisqueLight, 0.2)
    opacity: 0.2
    border-radius: 50%
    pointer-events: none
    transform: rotate(17deg)
    transform-origin: center center
    transition: all 0.3s ease-out

  .arrow
    position: relative
    display: inline-block
    width: 10px
    margin-left: 30px
    transform: translate3d(0,0,0)
    transition: transform 0.3s

    svg
      width: 100%
      max-height: 16px
      path
        fill: $darkBlue

  &:hover
    box-shadow: 4px 4px 10px 0 rgba(0,0,0,0)
    transition: all 250ms ease-out

    &::after
      left: -25%
      width: 150%
      opacity: 1

    .arrow
      transform: translate3d(0, 3px, 0)


  &.right
    .arrow
      top: -1px
      transform: rotate(-90deg)
      margin-left: 25px

    &:hover
      .arrow
        transform: rotate(-90deg) translate3d(0, 5px, 0)


// Modifier for when using button on a dark background
.button--light
  color: white

  .arrow
    svg
      path
        fill: white