$itemHeight: 40px

.dsml-media-nav-header
  display: flex
  justify-content: flex-end
  .dsml-media-file-col
    padding: 0

.dsml-media-type-col, .dsml-media-date-col
  font-size: 0.9em
  color: #b0b0b0
  margin: 0 0px 0 10px
.dsml-media-type-col
  flex: 0 0 120px
.dsml-media-date-col
  flex: 0 0 120px
  margin: 0 90px 0 10px

.dsml-resource
  .dsml-expand-label
    max-width: calc(100% - 350px)
    overflow: hidden
    white-space: nowrap
  .dsml-media-date-col
    margin-right: 0

.dsml-media-nav
  @extend %dsml-reset-list
  width: 100%
  margin: 25px 0 0
  font: $font-weight 1.4em $default
  *
    box-sizing: border-box
  li
    margin: 2px 0
  .dsml-media-nest
    margin: 0

.dsml-media-container
  display: flex
  width: 100%
  border: 1px solid #e0e0e0
  line-height: $itemHeight
  //flex-wrap: wrap
  padding: 0 10px
  .dsml-expand-label, .dsml-media-links
    display: inline-block
    vertical-align: middle
    margin: 0
  .dsml-expand-label
    flex-grow: 1
    font-size: 1em
    line-height: $itemHeight
    cursor: pointer
    a
      display: block
    .dsml-move-span
      display: none
  .filename
    color: #666
    display: inline-block
    border: 1px dashed red
  .dsml-media-links
    flex-basis: 80px
    text-align: right
  &:hover
    background: lighten($yellow, 50%)

.dsml-folder-link, .dsml-media-link
  &:before
    @extend .fa
    width: 15px
    display: inline-block
    margin-right: 4px

.dsml-folder-link
  @extend .fa-folder
  font-weight: 900
  color: #444

.dsml-media-link
  @extend .fa-file-o
  display: block
  padding: 0 20px
  margin-left: -10px !important
  width: calc(100% + 20px)
  b, i
    display: inline-block
  i
    &:before
      display: inline-block
      margin: 0 5px
      content: "-"
  &[alt$=".jpg"], &[alt$=".jpeg"], &[alt$=".png"], &[alt="Image"]
    @extend .fa-file-picture-o
  &[alt$=".pdf"], &[alt="PDF"]
    @extend .fa-file-pdf-o
  &[alt$=".mp4"], &[alt="Video"]
    @extend .fa-file-video-o
  &[alt$=".com"], &[alt$=".edu"], &[alt$=".org"], &[alt="Web link"]
    @extend .fa-globe
  &.expired
    &:before
      content: "\f071"

.dsml-modal-input, .dsml-asset-input
  &:checked
    & ~ .dsml-media-link
      background: $red
      color: #fff
      @extend .fa-check

.dsml-media-nest
  list-style: none
  width: 100%
  display: block
  display: none
  li
    padding-left: 20px

.dsml-expand-input
  position: absolute !important
  z-index: 4
  cursor: pointer
  opacity: 0.001
  &:checked
    & ~ .dsml-media-nest
      display: block
    & + .dsml-media-container
      .dsml-folder-link
        @extend .fa-folder-open

.dsml-modal-content
  .dsml-media-links
    display: none

// SELECT MEDIA

.dsml-move-input
  position: absolute
  left: -20px
  opacity: 0.001
  &:checked
    & + .dsml-expand-label
      span.dsml-media-link
        background: $red
        color: #fff
        @extend .fa-check

.dsml-move-selected
  display: none
  vertical-align: top
  float: none
  margin: 0
  width: auto
  line-height: 36px
  select
    width: auto
    margin: 0
    vertical-align: middle
    font-size: 1.3em

.dsml-move-selected-label
  color: #444
  font-size: 1.3em
  vertical-align: middle
  margin: 0 10px 0 0

#dsml-select-media
  position: absolute
  top: -20px
  opacity: 0.001
  z-index: 2
  &:checked
    & ~ .dsml-table-buttons-flex
      .dsml-select-media-button
        +dsml-button($primaryColor, #fff, 1.1em, true, "check")
        margin-right: 10px
      .dsml-move-selected
        display: inline-block

#dsml-select-media
  &:checked
    & ~ .dsml-media-nav
      .dsml-media-container
        .dsml-media-links
          display: none
        .dsml-expand-label
          a
            display: none
          .dsml-move-span
            display: block

.dsml-select-media-button
  +dsml-button(#fcfcfc, #444, 1.1em, true, "check")

.dsml-move-button
  +dsml-icon("arrow-circle-right")
  border: none
  background: none
  font-size: 2.2em
  margin-left: 6px
  cursor: pointer
  vertical-align: middle


// ICONS

.dsml-media-links
  a
    height: $itemHeight
    vertical-align: top
.dsml-edit-icon
  +dsml-icon("pencil")
.dsml-delete-icon
  +dsml-icon("trash")
  &:hover::before
    color: $red