// colors

$bg: #171714
$vibrant: #E8474C

$text: white
$label: white

$border: transparent
$static: #222222
$focus: #4E4E4E
$active: white
$inactive: #4E4E4E
$error: #E8474C

html
  -webkit-font-smoothing: antialiased

body
  background-color: $bg
  font-family: 'Titillium Web', sans-serif

  @media screen and (min-width: 40em)
    font-size: 1.25em

%block
  padding: .75em 1em
  appearance: none
  outline: none
  line-height: normal
  border-radius: 0
  border: none
  background: none
  display: block

%label
  @extend %block
  font-weight: bold
  color: $label
  padding:
    top: 0
    left: 0
  letter-spacing: .025em
  font-size: 1.125em
  line-height: 1.25
  position: relative
  z-index: 100

  .required &:after
    content: '\0020*'
    color: $error
    font-weight: normal
    font-size: .75em
    vertical-align: top

=stripes($color1: #555, $color2: transparent, $angle: 0deg, $stripe1-width: 25px, $stripe2-width: null)
  @if $stripe2-width == null
    $stripe2-width: $stripe1-width

  $tile-size: ($stripe1-width + $stripe2-width) * 2
  $stripe2-start: $stripe1-width / $tile-size * 100%
  $stripe3-start: $stripe2-start + $stripe2-width / $tile-size * 100%
  $stripe4-start: $stripe3-start + $stripe1-width / $tile-size * 100%

  background-size: $tile-size $tile-size
  background-image: linear-gradient($angle, $color1, $color1 $stripe2-start, $color2 $stripe2-start, $color2 $stripe3-start, $color1 $stripe3-start, $color1 $stripe4-start, $color2 $stripe4-start, $color2)
  background-repeat: repeat

%input
  @extend %block
  font: inherit
  line-height: normal
  width: 100%
  box-sizing: border-box
  background: $static
  color: white
  position: relative

  &:placeholder
    color: $label

  &:-webkit-autofill
    box-shadow: 0 0 0px 1000px $bg inset
    -webkit-text-fill-color: white
    border-top-color: $bg
    border-left-color: $bg
    border-right-color: $bg

  &.required, &[required]

  &:not(:focus):not(:active)
    &.error, .error &
      +stripes(rgba($vibrant,.5), transparent, 135deg, 2px, 2px)

  &:active, &:focus
    @extend %input-active

%input-active
  .form:not(.has-magic-focus) &
    background: $focus

%error
  @extend %block
  // color: red
  position: absolute
  bottom: 0
  right: 0
  z-index: 100
  font-size: .625em
  color: $label

%checkbox
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px

  + label
    @extend %input
    display: inline-block
    width: auto
    color: $inactive
    position: relative
    user-select: none
    cursor: pointer

  &:focus, &:active
    + label
      color: $focus

  &:checked
    + label
      color: $active

// &:focus, &:active
//   + label:before
//     box-shadow: inset 0px 0px 0px .5em $focus
//     color: $active

%option
  + label
// &:before
//   border-radius: 50%
// &:after
//   top: 1px
//   left: 1px
//   width: 1em
//   height: 1em
//   box-sizing: border-box
//   border: 3px solid $bg
//   border-radius: 50%
//   transform: none


%button
  @extend %block

  font: inherit
  // font-size: 1em
  line-height: normal
  cursor: pointer

  background: $vibrant
  color: white
  font-weight: bold
  width: auto
  margin-left: auto
  font-weight: bold
  padding:
    left: 2em
    right: 2em

  &:hover, &:focus, &:active
    color: white
    border-color: white

  &:active
    position: relative
    top: 1px
    left: 1px

body
  padding: 2em

.form
  max-width: 40em
  margin: 0 auto
  position: relative

  display: flex
  flex-flow: row wrap
  justify-content: space-between
  align-items: flex-end

  .field
    width: 100%
    margin: 0 0 1.5em 0
    &.half
      @media screen and (min-width: 40em)
        width: calc(50% - 1px)
    &.last
      margin-left: auto

  .text-input
    @extend %input

  .textarea
    @extend %input
    max-width: 100%

  .button
    @extend %button

  .label
    @extend %label

  .message
    @extend %error

  .select
    @extend %input
    text-indent: 0.01px
    text-overflow: ""!important
    &::-ms-expand
      display: none

  .checkboxes, .options
    padding: 0
    margin: 0
    list-style-type: none
    overflow: hidden

  .checkbox, .option
    float: left
    margin: 1px

  .checkbox-input
    @extend %checkbox

  .option-input
    @extend %checkbox
// @extend %option

.customSelect
  @extend %input
  pointer-events: none
  &:after
    content: ''
    pointer-events: none
    width: .5em
    height: .5em
    border-style: solid
    border-color: $label
    border-width: 0 3px 3px 0
    position: absolute
    top: 50%
    margin-top: -.625em
    right: 1em
    transform-origin: 0 0
    transform: rotate(45deg)

  &.customSelectHover

  &.customSelectOpen

  &.customSelectFocus
    @extend %input-active
    &:after
      border-color: white


  .customSelectInner

.magic-focus
  position: absolute
  z-index: 0
  width: 0
  // height: 0
  pointer-events: none
  background: rgba(white,.15)

  transition: top .2s, left .2s, width .2s

  backface-visibility: hidden
  transform-style: preserve-3d
  will-change: top, left, width

  transform-origin: 0 0