$action-size: 24px
$folder-colour: #333
$file-colour: #ccc
$selection-colour: #ccc
$selection-text-colour: #fff
$dragover-colour: #eee

div.rendered-file-browser
  div.files
    // list styles
    li.file, li.folder
      &.pending, &.dragging
        opacity: 0.4
      &.dragover
        background: $dragover-colour
      &.selected > div.item
        color: $selection-text-colour
        .text-muted
          color: darken($selection-text-colour, 10%)
        a:not(.btn), &.folder a:not(.btn), i
          color: $selection-text-colour
        background: $selection-colour

    $file-spacing: 4px
    ul
      list-style: none
      padding: 0
      display: grid
      gap: $file-spacing
      grid-template-columns: repeat(3, 1fr)

      $thumb-size: 120px
      $folder-size: 45px
      li
        &.folder
          grid-column: 1/4
          > div.item
            display: flex
            flex-direction: row
            align-items: center

            padding-left: 4px

            border: 1px solid #eee
            span.name
              flex: 1
              line-height: folder-size
            span.thumb
              flex-basis: $folder-size
              border: none
              text-align: center
              > i
                line-height: $folder-size
                font-size: $folder-size / 2.5
            form.renaming
              margin-top: 8px
              margin-right: 8px

          > p
            margin: 8px
            margin-bottom: 0
            padding: 0

          &.expanded
            > div.item
              padding-left: 0px
              margin-right: -1px
              margin-left: -1px
            padding-bottom: 8px
            border-bottom: 1px solid #eee
            border-left: 4px solid #eee
            border-right: 1px solid #eee
            &.selected
              border-bottom: 1px solid $selection-colour
              border-left: 4px solid $selection-colour
              border-right: 1px solid $selection-colour
        &.selected.folder > div.item
          border: 1px solid darken($selection-colour, 5%)
          span.thumb
            border: none

        &.file
          margin: $file-spacing
          padding: 0
          > div.item
            display: flex
            flex-direction: column
            padding: 4px
            margin: 0

            span.thumb
              flex-basis: $thumb-size
              text-align: center
              position: relative
              border: 1px solid #eee
              margin-bottom: 10px
              > i
                font-size: 40px
                line-height: $thumb-size
              div.image
                position: absolute
                top: 0
                left: 0
                width: 100%
                height: 100%
                background-size: cover
                background-position: 50% 50%
                background-repeat: no-repeat
        &.selected.file > div.item
          span.thumb
            border: 1px solid darken($selection-colour, 5%)
          span.thumb div.image
            opacity: 0.8
  p.loading, p.empty
    margin: 16px 0