/* ==========================================================================
   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
  min-height: 100%


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

body
  margin: 0
  min-height: 100%
  font-family: $fontFamily
  line-height: 1.6
  background-color: #24282D
  font-feature-settings: 'lnum' /* 1 */

/*
 * Set default settings for all elements
 *
 * 1. Default selection styling
 *
 */
*
  ::selection /* 2 */
    background: $blue
    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 */
  background-color: transparent

  &:focus
    outline: none


a
  color: #CECECE

/*
 * Set default styling for a button
 *
 */


.button
  display: inline-block
  padding: 10px 20px
  background-color: $brightBlue
  border: 1px solid white
  border-radius: 10px
  text-decoration: none
  color: white

  .arrow
    display: inline-block
    margin-left: 25px
    +sprite(-35px -1px, 15px, 10px)
    transform: translate3d(0,0,0)
    transition: transform 0.3s

  &:hover
    .arrow
      transform: translate3d(5px, 0, 0)


.default-page-content
  background-color: #F7F8FA
  overflow: hidden
  min-height: calc(100% - 659px)
  position: relative

  > .grid-row
    &.two-columns
      display: flex
      flex-wrap: wrap
      font-size: 0.8rem
      line-height: 1.1
      min-height: 653px
    +respond-to-width(650)
      width: 100%

.centered
  font-size: 0.8rem
  line-height: 1.1
  width: column(10, 12)
  padding: 133px 0
  margin: 0 auto 65px auto

  +respond-to-width(1280)
    width: column(10.5, 12)

  +respond-to-width(950)
    width: 100%

  +respond-to-width(850)
    width: 100%
    padding: 60px 0
    margin: 0 auto

  +respond-to-width(650)
    padding: 0

  h1
    color: $semiBlack
    font-size: 1.6rem
    font-weight: bold
    line-height: 2
    margin: 50px 0 65px 0


  .placeholder
    width: column(8, 10)
    position: relative
    border-radius: 5px
    background-color: #FFFFFF
    box-shadow: 10px 10px 20px 0 rgba(206,206,206,0.6)
    padding: 35px column(1, 8)
    margin: 0 auto 60px auto

    +respond-to-width(1280)
      width: 100%

    +respond-to-width(850)
      padding: 35px column(0.5, 8)

    +respond-to-width(650)
      margin: 0

.sidebar
  font-size: 0.8rem
  line-height: 1.1
  width: column(3.2, 12)
  display: inline-block
  vertical-align: top
  background-color: white
  box-shadow: -5px 0px 40px 5px rgba(0, 0, 0, 0.1)
  overflow: visible
  position: absolute
  right: 0
  top: 0
  height: 100%
  z-index: 10

  +respond-to-width(1280)
    width: column(4, 12)

  +respond-to-width(900)
    height: 100%
    width: 50%
    right: 60px
    +transform(translate( 100%, 0))
    overflow: hidden
    +transition(transform 0.5s, width 0.5s)

    &.open
      +transform(translate( 60px,0))

  +respond-to-width(700)
    &.open
      width: 80%

  +respond-to-width(550)
    &.open
      width: 100%


  &:after
    content: ''
    position: absolute
    top: 0
    left: 100%
    width: 35vw
    height: 100%
    background-color: white
    z-index: 0

  h1
    color: $semiBlack
    font-size: 1.6rem
    font-weight: bold
    line-height: 2
    margin: 50px 0 50px 0
    padding: 0 0 0 14%

    span.icon
      display: none
      +respond-to-width(900)
        width: 25px
        height: 25px
        border-radius: 9999px
        background-color: $lightGray
        position: relative
        left: -5px
        top: -10px
        transition: transform 0.4s
        +flex(center, center)

        svg
          height: 15px
          width: 15px

    +respond-to-width-beyond(1800)
      padding-left: 50px

    +respond-to-width(900)
      position: absolute
      word-break: break-all
      width: 0.7rem
      font-size: 0.8rem
      text-transform: uppercase
      margin-left: 22px
      text-align: center
      padding: 0

  &.open
    h1
      span.icon
        svg
          transform: scaleX(-1)


  ul
    margin: 0
    padding: 0
    list-style: none
    position: relative
    z-index: 1
    height: calc(100% - 164px)
    overflow-x: hidden
    overflow-y: scroll

    +respond-to-width(900)
      margin-left: 60px
      border-left: 1px solid rgba($ctaBackground, 0.5)

    li
      padding: 0 50px
      border-top: 1px solid rgba($ctaBackground, 0.5)
      width: 42vw
      text-align: left

      +respond-to-width(900)
        width: 100%

      p
        width: 50%

        +respond-to-width(900)
          width: 100%

span.icon
  width: 40px
  height: 40px
  border-radius: 9999px
  margin-right: 25px
  +inline-flex(center, center)

  svg
    height: 20px
    width: 20px

    > g
      > g, use
        fill: white

  &.yellow
    background-color: #ffcb00

  &.red
    background-color: $logoRed

  &.blue
    background-color: $blue

  &.green
    background-color: #04D682

  &.lock
    svg
      position: relative
      left: 1px
      top: -2px

  &.cross
    position: absolute
    left: column(-1, 12)
    top: 14px
    svg
      width: 30px
      height: 30px
      > g
        > g
          fill: $redTheme2

    +respond-to-width(850)
      left: 0

    +respond-to-width(425)
      top: 7px

input[type=number], input[type=date]
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button
    /* display: none <- Crashes Chrome on hover */
    -webkit-appearance: none
    margin: 0 /* <-- Apparently some margin are still there even though it's hidden */

span.error-message
  position: absolute
  left: 0
  bottom: 6px
  font-size: 0.8rem
  background-color: rgba($redTheme, 0.7)
  width: 100%
  border-radius: 0 0 5px 5px
  color: white
  padding: 0 10px

  &:first-letter
    text-transform: capitalize



// customize the jQuery datepicker
.ui-datepicker
  .ui-datepicker-header
    background-color: $redTheme
    background-image: none