$selection-bar-size: 0.3rem

div.rendered-react-keyed-file-browser
  div.files table
    width: 100%
    margin-bottom: 2rem

    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none

    th, td
      font-size: $main-size
      font-weight: normal
      text-align: left
      margin: 0
      padding: $main-padding
    th
      font-weight: bold

    th, td
      &.size, &.modified
        text-align: right

      &.name
        i
          padding-right: $main-padding

    thead th
      border-bottom: 0.1rem solid #ddd
    tr:not(:last-child) td
      border-bottom: 0.1rem solid #eee

    td.name
      padding-left: $main-padding + $selection-bar-size

      form.renaming
        display: flex
        align-items: center
        i
          flex-grow: 0
          flex-shrink: 0
        input[type="text"]
          flex: 1

    tr
      td
        cursor: pointer
      &.selected
        td
          font-weight: bold
          input, button
            font-weight: normal
          &.name
            position: relative
            &:after
              content: ' '
              position: absolute
              left: 0
              top: 0
              width: $selection-bar-size
              height: 100%
              background: darken($theme-colour-text, 20%)
      &.dragover
        td, th
          background: #eee