/*------------------------------------------------------------------------------
*
*  Inputs
*
------------------------------------------------------------------------------*/

label
  &.custom-select
    position relative
    font-family "ProximaNova Regular"
    display inline-block

.custom-select
  transition: all .3

  select
    font-family "ProximaNova Regular"
    min-width 100px
    display inline-block
    border 2px solid #ccc
    padding 4px 3px 3px 5px
    margin 0
    font inherit
    outline none
    line-height 1.2
    background white
    -webkit-appearance none
    -webkit-border-radius 2px
    -moz-border-radius 2px
    border-radius 2px
  &:after
    font-family "SSStandard"
    content "navigatedown"
    position absolute
    top 0
    right 0
    bottom 0
    font-size 60%
    line-height 34px
    padding 0 7px
    background #ccc
    color $space-gray
    pointer-events none
    -webkit-border-radius 0 2px 2px 0
    border-radius 0 2px 2px 0

.no-pointer-events
  .custom-select
    &:after
      content none

[type="button"], 
[type="text"]
  -webkit-user-select: none
  font: inherit
  font-family: "ProximaNova Regular"
  min-width: 100px
  display: inline-block
  border: 2px solid #ccc
  padding: 4px 3px 3px 5px
  margin: 0
  outline: none
  line-height: 1.2
  background: white
  -webkit-appearance: none
  -webkit-border-radius: 2px
  transition: all .1s ease-in
  border-radius: 2px

[type="text"]:focus
  transition: all .2s

[type="button"]
  font: inherit
  font-family: "ProximaNova Regular"
  color: $space-gray
  background #ccc
  padding: 5px
  &:hover
    transition: all .2s ease-in
    background: darken(@background, 5%)
  &:disabled
    opacity: 0.4

[type="button"].ss-icon
  font-family: "SSStandard"
  line-height: 10px
  padding: 10px 0px 6px 0px
  top: 3px
  position: relative
  min-width: 35px
  max-width: 35px

[type="checkbox"].custom:not(:checked),
[type="checkbox"].custom:checked
  position absolute
  left -9999px

[type="checkbox"].custom:not(:checked) + label,
[type="checkbox"].custom:checked + label
  font-family: "ProximaNova Regular"
  position: relative
  padding: 7px 10px 7px 40px
  color: $space-gray
  cursor: pointer
  background: #ccc
  border-radius: 2px
  height: 30px

[type="checkbox"].custom:not(:checked) + label:before,
[type="checkbox"].custom:checked + label:before
  content: ''
  position: absolute
  left: 0
  top: 0px
  width: 30px
  height: 30px
  line-height: 30px
  border: 2px solid #ccc
  background: #fff
  border-radius: 2px

[type="checkbox"].custom:not(:checked) + label:after,
[type="checkbox"].custom:checked + label:after
  content "check"
  font-family "SSStandard"
  position absolute
  top 6px
  left 8px
  line-height: 20px
  font-size 14px
  color $blue
  transition all .2s

[type="checkbox"].custom:not(:checked)
  & + label
    &:after
      opacity 0
      transform scale(0)

[type="checkbox"].custom:checked
  & + label
    &:after
      opacity 1
      transform scale(1)

[type="checkbox"].custom:disabled:not(:checked) + label:before,
[type="checkbox"].custom:disabled:checked + label:before
  box-shadow none
  border-color #bbb
  background-color #ddd

[type="checkbox"]:disabled
  &:checked
    & + label
      &:after
        color #999
  & + label
    color #aaa

[type="checkbox"].custom:checked:focus + label:before,
[type="checkbox"].custom:not(:checked):focus + label:before
  transition: all .1s ease-in