@charset 'utf8'

@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600,700')
@import '../../node_modules/rash/rash'

$blue: #1991EB

html, body, .hero
  width: 100%
  font-family: 'Open Sans', sans-serif
  -webkit-font-smoothing: antialiased
  background: $black

.drop-container
  padding: 40px 0
  border-radius: 10px
  margin-bottom: 10px
  border: 1px solid #313D4F
  margin-top: 20px
  background: $white
  svg
    width: 100px
    margin: 20px auto
    display: block
  h1
    display: block
    color: $black
    font-size: 22px
    text-align: center
    font-weight: 600

  &.is-drop-over
    background: lighten(#273142, 45)

.upload-button, .start-upload-btn
  width: 200px
  display: block
  margin: 10px auto
  border-radius: 30px
  background: $white
  outline: none
  font-size: 18px
  text-align: center
  padding: 10px 30px
  cursor: pointer
  color: $black
  border: none
  font-weight: 400
  transition: all 250ms linear
  input
    display: none

  &:hover
    background: $white

  &.start-upload-btn
    background: $white
    padding: 10px
    width: 200px
    font-size: 18px

.progress-bar-container
  width: 100%
  height: 4px
  border-radius: 10px
  background: #495057
  margin: 30px 0
  position: relative
  border: none
  display: flex
  justify-content: center
  align-items: center
  color: $black
  font-size: 14px
  text-align: center
  .bar
    z-index: 1
    padding: 0
    margin: 0
    border-radius: 10px
    position: absolute
    top: 0
    left: 0
    height: 4px
    background: $white
    &.green
      background: $white
  span
    z-index: 2

.verbose-data
  color: $black
  padding-bottom: 20px
  pre
    code
      background: $white
      border: 1px solid #313D4F
      border-radius: 5px
      font-size: 11px
      color: $black

.label
  margin: 5px 10px 0 0
  color: $white
  display: block

.input-field
  background: $white
  width: 60px
  height: 30px
  font-size: 12px
  padding: 3px
  text-align: center
  border: 1px solid #313D4F
  font-weight: $weight-semibold
  color: $black

  &:hover, &:focus
    border: 1px solid $black

.checkbox
  width: 25px
  margin: 0
  position: relative

  label
    cursor: pointer
    position: absolute
    width: 25px
    height: 25px
    top: 0
    left: 0
    background: $white
    border: 1px solid #313D4F
    border-radius: 4px

    &:after
      opacity: 0
      content: ''
      position: absolute
      width: 12px
      height: 7px
      background: transparent
      top: 7px
      left: 6px
      border: 3px solid $black
      border-top: none
      border-right: none
      transform: rotate(-45deg)

    &:hover
      &::after
        opacity: 0.2

  input[type="checkbox"]:checked + label:after
    opacity: 1

.centered
  display: flex
  align-items: center