body#comfy

  .comfy-admin-partial
    background-color: $gray-200
    color: $black
    font-size: 9px
    line-height: 11px
    padding: 5px
    background-image: linear-gradient(-45deg, rgba(0, 0, 0, .05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, .05) 75%, transparent 75%, transparent)
    background-size: 50px 50px
    overflow: hidden
    width: 100%

  &.in-iframe
    height: 100%
    #cms-left, #cms-right
      display: none
    #cms-main
      padding-top: 0

  .alert
    border-radius: 0
    margin: 0 -15px 1rem -15px
    text-align: center

  .fragment-attachments
        padding: 5px 0
        .btn
          margin-bottom: 5px
        .custom-checkbox
          margin: 0
          vertical-align: middle
          padding-left: 1rem
          .custom-control-indicator
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z' /%3E%3C/svg%3E")
          .custom-control-input:checked ~ .custom-control-indicator
            background-color: $red

  #cms-left
    position: fixed
    top: 0
    bottom: 0
    left: 0
    z-index: 1001
    padding: 0

    button.navbar-toggler
      color: $white

    nav.navbar
      padding: 1rem

      ul.nav
        width: 100%
        li
          position: relative
          width: 100%
          a
            color: $gray-500
          a:hover, a.active
            color: $white
            background-color: $gray-700
          a.cms-files-open-modal
            height: 26px
            width: 26px
            line-height: 26px
            position: absolute
            text-align: center
            right: 0
            top: 7px
            border-radius: 0.25rem

    .left-footer
      padding: 5px
      position: absolute
      width: 100%
      text-align: center
      bottom: 0
      font-size: 12px
      color: $white
      a
        color: $gray-500

    @media (max-width: map-get($grid-breakpoints, lg))
      right: 0
      bottom: auto
      nav.navbar
        padding: 0.5rem
      .left-footer
        display: none

  #cms-right
    background-color: $gray-100
    position: fixed
    top: 0
    bottom: 0
    right: 0
    z-index: 999
    padding: 0

    @media (max-width: map-get($grid-breakpoints, lg))
      position: relative
      padding-bottom: 3.5rem

    .box
      padding: 1rem
      margin-bottom: 1rem
      background-color: $white
      border: 1px solid $gray-200
    .box.translations
      a.translation
        color: $black
      a.draft
        color: $gray-600

    .box.categories-widget
      .editable
        display: none
      .categories .category, form#new-category, form.edit_category
        margin-bottom: 0.25rem

  #cms-main
    padding-bottom: 3.5rem

    @media (max-width: map-get($grid-breakpoints, lg))
      padding-top: 3rem
      padding-bottom: 0

    .page-header
      margin: 1rem 0
      border-bottom: 1px solid $gray-300

    .form-actions
      padding: 0.5rem
      position: fixed
      bottom: 0
      left: 0
      right: 0
      z-index: 1000
      border-top: 1px solid $gray-200

    ul.list
      %item-active
        background-color: $white
      %control-active
        color: $gray-800
      padding: 0
      li
        list-style: none
        ul
          padding-left: 0
        .row
          background-color: $gray-100
          margin-bottom: 5px
          padding: 5px 0
          .item
            display: flex
            .item-controls
              padding: 2px 0
              .dragger, .toggle
                margin-right: 15px
                display: block
                color: $gray-500
              .dragger
                cursor: move
              .toggle
                .collapse
                  display: none
                .expand
                  display: inline
                &:hover
                  @extend %control-active
              .toggle.open
                .collapse
                  display: inline
                .expand
                  display: none

            .item-content
              .item-title
                a
                  font-size: 1.2rem
                  color: $black
                a.draft
                  color: $gray-600
              .item-meta
                font-size: 0.75rem
          .btn-group
            background-color: $white
        &.sortable-ghost, &.sortable-chosen
          > .row
            @extend %item-active
            > .item > .item-controls > .dragger
              @extend %control-active
      &:not(.sortable-active) > li
        >.row
          &:hover
            @extend %item-active
          > .item > .item-controls
            .dragger
              &:hover
                @extend %control-active


  // -- Pages ------------------------------------------------------------------
  &.c-comfy-admin-cms-pages
    #form-fragments
      ul.nav-tabs
        margin-bottom: 1rem
      label.renderable-false
        color: $gray-600

  // -- Files ------------------------------------------------------------------
  .cms-files-modal
    z-index: 99999
    iframe
      width: 100%
      height: 100%
      border: 0

  &.c-comfy-admin-cms-files
    ul.list
      input.file-path
        border: 0
        color: $gray-500
        background: inherit
      .progress
        width: 100%
        height: 25px
    form
      .file-image
        img
          width: 100%

    .cms-uploader-drag-drop-target-active
      position: fixed !important
      z-index: 9999
      top: 0
      left: 0
      width: 100%
      height: 100%
      border: dotted #ccc 1px
      background-color: rgba(255, 255, 255, 0.7)

  // -- Revisions --------------------------------------------------------------
  &[class*="c-comfy-admin-cms-revisions-"], &[class*="c-comfy-admin-blog-revisions-"]
    .label
      padding: 15px 0
      font-weight: bold
    .revision
      margin-bottom: 5px
      .content
        padding: 15px 0
        ins, del
          display: inline
        ins
          background-color: #c6ffc6
          text-decoration: none
        del
          background-color: #ffc6c6