.modal section.media-picker
  padding-top: 0

.media-picker-grid
  display: grid
  grid-auto-columns: minmax(200px, auto)
  grid-template-columns: repeat(5, 1fr)
  grid-row-gap: 15px
  grid-column-gap: 15px

  @media (min-width: 1680px)
    grid-template-columns: repeat(6, 1fr)

  .media-folder
    border-radius: 6px

.media-picker-uploader
  background: #eee
  border-radius: 5px
  height: 100%
  position: relative

  &:before
    color: #999
    font-size: 48px
    left: 50%
    position: absolute
    top: 50%
    transform: translateX(-50%) translateY(-50%)
    @extend .icon, .icon-upload-outline

  &:hover:before
    color: #333

  &.uploading:before
    font-size: 24px
    @extend .icon-dots

  input[type="file"]
    cursor: pointer
    height: 100%
    opacity: 0
    width: 100%

  input[type="submit"]
    display: none

.media-picker-image
  cursor: pointer
  display: block
  margin: 0
  position: relative

  span
    background: #eee
    border-radius: 6px
    display: block
    height: 0
    overflow: hidden
    padding-top: calc(150 / 200 * 100%)
    position: relative

  img
    border-radius: 6px
    display: block
    height: auto
    left: 0
    position: absolute
    top: 0
    width: 100%

  input[type="radio"], input[type="checkbox"]
    display: none

  input[type="radio"]:checked + span:before, input[type="checkbox"]:checked + span:before
    background: $primary-color-light
    border-radius: 6px
    content: " "
    height: 100%
    left: 0px
    opacity: .5
    position: absolute
    top: 0px
    width: 100%
    z-index: 1

  input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after
    align-items: center
    background: rgba(0, 0, 0, .2)
    border: 1px solid rgba(255, 255, 255, .25)
    border-radius: 15px
    content: "\f120"
    color: white
    display: flex
    font-size: 13px
    height: 30px
    justify-content: center
    left: 50%
    position: absolute
    transform: translateX(-50%) translateY(-50%)
    top: 50%
    width: 30px
    z-index: 2
    @extend .icon

.media-picker-footer
  align-items: center
  border-top: 1px solid #e9e9e9
  bottom: 0px
  display: flex
  position: sticky
  z-index: 10

  .button
    margin: 0
    white-space: nowrap

  input[type="text"]
    height: 36px
    line-height: 24px
    margin-right: 10px
    padding: 0 10px

.media-picker-selected-images
  flex: 1

  img
    border-radius: 6px
    display: block
    float: left
    height: 37px
    margin-right: 5px
    width: 50px