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

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

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


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

body
  margin: 0

  font-family: $fontFamily
  line-height: 1.6

  font-feature-settings: 'lnum'
  color: $darkgrey

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

/**
 * 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: $fontFamily

/*
 * Set default styling for a button
 *
 */
.button
  display: inline-block
  padding: 12px 20px
  background-color: $darkgrey
  border: none
  text-decoration: none
  font-size: 0.8rem
  line-height: 1.2
  font-weight: semibold()
  text-transform: uppercase
  color: $yellow
  border-radius: 2px
  transition: box-shadow 0.3s, background-color 0.3s

  .arrow
    position: relative
    display: inline-block
    width: 10px
    transition: transform 0.2s

    svg
      width: 100%
      max-height: 16px

  &:hover
    background-color: lighten($darkgrey, 12%)
    box-shadow: inset 0 0 15px 0 rgba($black,0.85)

    .arrow
      transform: translateX(5px)

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

    &:hover
      .arrow
        transform: rotate(-90deg) translateY(5px)


.button--primary
  background-color: $yellow
  color: $dark

  &:hover
    background-color: lighten($yellow2, 5%)