$itemsPerRow: 10
$border-radius: 7px
$popupWidth: 100%
$popupOffsetTotal: (2 * 40px)
$active-border-width: 3px
$active-border-color: #333333
$offsetForAllSides: 40px

$totalHeightOfHeaderUploadAndFooterCombined: 44 + 48 + 47px

.media-manager
  background-color: white
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
  font-family: Arial, serif
  border-radius: $border-radius
  margin: auto
  width: calc(#{$popupWidth} - #{$popupOffsetTotal})
  height: calc(100% - (#{$offsetForAllSides} * 2))
  position: absolute
  top: $offsetForAllSides
  right: 0
  left: 0
  z-index: 2

  &__header
    padding: 12px 10px
    border-radius: $border-radius $border-radius 0 0
    background-color: #FAFBFD

  &__title
    color: #212121
    margin: 0
    font-size: 17px

  &__action-bar
    padding: 5px

  &__content
    display: flex
    flex-wrap: wrap
    max-height: calc(100% - #{$totalHeightOfHeaderUploadAndFooterCombined})
    overflow-y: scroll

  &__item
    width: calc(100% / #{$itemsPerRow})
    display: inline-block

    &::after
      content: ''
      display: block
      padding-top: 100%

    &--active
      width: calc((#{$popupWidth} / #{$itemsPerRow}) - (#{$active-border-width} * 2))
      border: $active-border-width solid $active-border-color

  &__trash-icon
    color: white
    position: absolute
    bottom: 5px
    right: 5px

  &__button
    padding: 10px
    border: none
    color: white
    font-size: 14px
    text-transform: uppercase
    background-color: transparent
    font-weight: 600

    &--upload
      font-size: 13px
      color: #212121
      font-weight: normal
    &--confirm
      color: #536DFE
    &--cancel
      color: #BDBDBD

  &__footer
    background-color: #FAFBFD
    padding: 5px
    border-radius: 0 0 $border-radius $border-radius
    display: flex
    flex-direction: row-reverse
    position: absolute
    bottom: 0
    width: calc(100% - 10px)

  &__overlay
    background-color: black
    opacity: 0.5
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 1
    display: none

    &--active
      display: block