@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.5em
    text-align: right
  input, textarea, .mce-tinymce, div.tagsinput, .field_with_errors:last-child
    flex-grow: 1
  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

.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.5em 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

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

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

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

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