@import font-awesome-sprockets
@import font-awesome

$border: none
$radius: 4px
$shadow: 0 0 2px darkgray

body.mce-content-body
  margin: 0
  border: none
  padding: 1px 1%
  font-size: inherit
  min-height: 100%

.mce-menubar, .mce-panel
  border: none !important

.helper p
  color: gray
  text-align: right
  margin-top: 0
  margin-bottom: 0

.field
  color: #666
  border: $border
  display: flex
  flex-wrap: wrap
  box-shadow: $shadow
  border-radius: $radius
  & > label, .field_with_errors > label
    width: 10em
    margin: 0
    padding: 0.8em
    text-align: right
    padding-left: 0
  .helper
    color: #888
    padding: 0.8em
    font-style: italic
    margin-left: 0
  input, textarea, .mce-tinymce, div.tagsinput, .field_with_errors:last-child
    flex-grow: 1
    &[type=number], &[type=checkbox]
      flex-grow: unset
      margin-left: 0
      margin-right: 0
  select
    margin-left: 0
    margin-right: 0
  .field_with_errors:first-child
    width: 10em
  .field_with_errors > *
    width: 100%
    display: block

input, textarea, select, a.button, .actions > button, .mce-tinymce, div.tagsinput, .ui-autocomplete-input
  border: solid 0.25em transparent
  outline: none
  padding: 0.25em
  font-size: inherit
  font-family: inherit
  background-color: transparent
  &:focus
    border-color: #F0F8FF
  &[type=radio]
    box-shadow: none
  &[type=radio] + label
    border: none
  &[type=submit], &.button
    cursor: pointer
    margin: 3px 0.4em
    font-size: larger
    box-shadow: $shadow
    font-weight: bolder
    letter-spacing: 2px
    background-color: #9CC5EE

.mce-tinymce
  box-shadow: none !important
.mce-top-part:before
  box-shadow: 0 1px lightgray !important

.field_with_errors
  display: inline
  input, textarea, select, a.button
    background-color: pink

.radios
  margin-left: 0
  [type=radio]
    display: none
  label
    color: #258
    cursor: pointer
    padding: 0.8em 0
    display: inline-block
    &:hover
      color: #222
      box-shadow: 0 0 0 4px lightgray
  [type=radio]:checked + label
    color: black
    box-shadow: 0 0 0 6px lightgray
  [type=radio]:invalid + label
    box-shadow: 0 0 1px tomato

.actions
  text-align: center
  input
    font-size: x-large

.field
  &.required
    & > label, & .field_with_errors > label
      &:after
        color: darkred
        content: '*'
        font-size: smaller
        margin-left: 0.4em
  & > label:before, & .field_with_errors > label:before, th:before, th a:before
    margin-right: 0.4em
    @extend .fa
  &.login label:before
    content: fa-content($fa-var-sign-in-alt)
  &.password label:before
    content: fa-content($fa-var-unlock)
  &.title label:before
    content: fa-content($fa-var-newspaper)
  &.start_time label:before
    content: fa-content($fa-var-toggle-on)
  &.end_time label:before
    content: fa-content($fa-var-toggle-off)
  &.repeat label:before
    content: fa-content($fa-var-redo)
  &.rule > label:before
    content: fa-content($fa-var-calculator)
  &.description label:before
    content: fa-content($fa-var-edit)
  &.place_name label:before
    content: fa-content($fa-var-map-pin)
  &.address label:before
    content: fa-content($fa-var-map-marker)
  &.city label:before, th.city a:before
    content: fa-content($fa-var-building)
  &.department label:before, th.department a:before
    content: fa-content($fa-var-puzzle-piece)
  &.region > label:before, th.region a:before
    content: fa-content($fa-var-shield-alt)
  &.locality > label:before
    content: fa-content($fa-var-expand)
  &.contact label:before
    content: fa-content($fa-var-envelope)
  &.submitter label:before
    content: fa-content($fa-var-envelope)
  &.url label:before, th.url:before
    content: fa-content($fa-var-external-link-alt)
  &.diaspora label:before, th.diaspora:before
    content: fa-content($fa-var-bullhorn)
  &.tags label:before, th.tags a:before
    content: fa-content($fa-var-tags)
  &.active label:before
    content: fa-content($fa-var-heartbeat)
  &.reason label:before
    content: fa-content($fa-var-comment)

  &.kind > label:before, th.kind:before
    content: fa-content($fa-var-cubes)
  &.feed label:before, th.feed:before
    content: fa-content($fa-var-rss)

  &.future label:before
    content: fa-content($fa-var-backward)
  &.period_year label:before
    content: fa-content($fa-var-fast-backward)
  &.period_week label:before
    content: fa-content($fa-var-step-backward)
  &.near_location label:before
    content: fa-content($fa-var-dot-circle)
  &.near_distance label:before
    content: fa-content($fa-var-arrows-alt-h)
  &.iframe label:before
    content: fa-content($fa-var-arrows-alt)