@import init

*
  box-sizing: border-box

body
  margin: 1em

  @media screen and (max-width: $tablet-large)
    margin: $small-screen-body-margin

.header>form
  max-width: 600px
.field, textarea
  margin-bottom: 5px

.field
  display: flex
label
  margin-right: 0.5em

input[type=text], input[type=url]
  flex: 1 0 auto
textarea
  width: 100%
  height: 5em
input[type=submit]
  width: 150px
  height: 3em
  font-size: 1em

.file-section
  margin-bottom: 15px

  .field
    height: 1.6em

  a.add
    margin-right: 0.5em

  .actions
    display: inline
    line-height: 2em

img.loading
  display: none
  vertical-align: bottom

.hide
  display: none

.break-word
  -ms-word-break: break-all
  -ms-word-wrap: break-all
  -webkit-word-break: break-word
  -webkit-word-wrap: break-word
  word-break: break-word
  word-wrap: break-word
  -webkit-hyphens: auto
  -moz-hyphens: auto
  hyphens: auto

@import init

html
  box-sizing: border-box
*, *:before, *:after
  box-sizing: inherit

body
  margin: 1em

  @media screen and (max-width: $tablet-large)
    margin: $small-screen-body-margin

.header>form
  max-width: 600px
.field, textarea
  margin-bottom: 5px

.field
  display: flex
label
  margin-right: 0.5em

input[type=text], input[type=url]
  flex: 1 0 auto
textarea
  width: 100%
  height: 5em
input[type=submit]
  width: 150px
  height: 3em
  font-size: 1em

.file-section
  margin-bottom: 15px

  .field
    height: 1.6em

  a.add
    margin-right: 0.5em

  .actions
    display: inline
    line-height: 2em

img.loading
  display: none
  vertical-align: bottom

.hide
  display: none

.break-word
  -ms-word-break: break-all
  -ms-word-wrap: break-all
  -webkit-word-break: break-word
  -webkit-word-wrap: break-word
  word-break: break-word
  word-wrap: break-word
  -webkit-hyphens: auto
  -moz-hyphens: auto
  hyphens: auto

Apply box-sizing to pseudo elements too
Apply box-sizing to pseudo elements too

https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
