/* ==========================================================================
   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: $fontFamily
  line-height: 1.6

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

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


/*
 * 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 /* 1 */

h1, h2, h3, h4, h5
  .euro-sign
    font-family: $fontFamily !important
    font-weight: semibold()

.button
  display: inline-block
  border-radius: 6px
  padding: 10px 15px 12px
  font-size: 0.8rem
  line-height: 1.2
  color: white
  font-weight: 600
  text-decoration: none
  background-color: $greyBluer
  transition: background-color 0.3s

  &:hover
    background-color: darken($greyBluer, 10%)

    .double-arrow
      &:before
        transition-delay: 0.15s
      &:before, &:after
        transform: translate3d(5px,0,0)

  &.light-blue
    background-color: $greyBlue

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

  &.orange
    background-color: $lightOrange

    &:hover
      background-color: darken($lightOrange, 7.5%)

  &.green
    background-color: $neonGreen

    &:hover
      background-color: darken($neonGreen, 10%)


.double-arrow
  position: relative
  top: 2px
  margin-left: 5px
  width: 10px
  height: 11px
  display: inline-block

  &:after, &:before
    content: ''
    display: block
    +sprite(-87px -1px, 5px, 10px)
    transition: transform 0.3s
    transform: translate3d(0,0,0)

  &:before
    //opacity: 0.7

  &:after
    position: absolute
    top: 0
    left: 4px

  &.blue
    &:after, &:before
      +sprite(-93px -1px, 5px, 10px)

  &.white
    &:after, &:before
      +sprite(-87px -1px, 5px, 10px)


.vacancies-button
  position: relative
  .amount
    position: absolute
    right: -12px
    top: -12px
    width: 25px
    height: 25px
    +flex(center, center)
    border-radius: 100%
    background-color: $orange
    color: white
    font-size: 0.6rem
    line-height: 1
    font-weight: bold