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%

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

  .fragment-attachments
    padding: 5px 0
    .fragment-attachment
      input[type="checkbox"]
        display: none
        & + label
          margin-bottom: 0
          color: $gray-400
        &:checked + label
          background-color: $red
          color: $white

  #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, &.c-comfy-admin-cms-translations
    #form-fragments
      ul.nav-tabs
        margin-bottom: 1rem
      label.renderable-false
        color: $gray-600

  // -- Files ------------------------------------------------------------------
  .cms-files-modal
    z-index: 99999
    .modal-dialog
      max-width: 900px
    .modal-content
      max-height: calc(100vh - 60px)
    .modal-body
      overflow-y: auto

  // -- 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

#cms-uploader
  ul.list
    .file-path
      border: 0
      color: $gray-500
      background: inherit
      white-space: nowrap
      user-select: all
    .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)