@import ~mweb/common/components/safeAreaMixins

/**
 * With two columns, we have: |49.5vw||49.5vw|, leaving us with 1 vw leftover.
 * Add padding to edges to get uniform padding, so 1/2 = 0.5
 */
$two-column-card-outer-padding: .5vw
$two-column-card-outer-padding-percent: 0.005

/**
 * With one column, we have: |98vw|, leaving us with 2 vw leftover.
 * Add padding to edges to get uniform padding, so 2/2 = 1
 */
$one-column-card-outer-padding: 1vw
$one-column-card-outer-padding-percent: 0.01

/**
 * With three columns, have |33vw||33vw||33vw|, leaving us with 1 vw leftover.
 * Add padding to edges to get uniform padding, so 1/2 = 0.5
 */
$three-column-card-outer-padding: .5vw
$three-column-card-outer-padding-percent: 0.005

.channel-list-empty
  text-align: center
  margin-top: 20vh

.channel-list
  align-content: center
  display: flex
  flex-flow: wrap row

  padding: $two-column-card-outer-padding
  @include safe-area-padding-in-vw-percent($two-column-card-outer-padding-percent)

  width: 100%

  @media (max-width: 540px) and (orientation: portrait)
    padding: $one-column-card-outer-padding
    @include safe-area-padding-in-vw-percent($one-column-card-outer-padding-percent)

  @media (min-width: 768px) and (orientation: landscape)
    padding: $three-column-card-outer-padding
    @include safe-area-padding-in-vw-percent($three-column-card-outer-padding-percent)

  .channel-thumbnail-card
    // The infinite list tool can't handle margins in calculations, switch to padding.
    margin: 0

    padding: $two-column-card-outer-padding
    @include safe-area-padding-in-vw-percent($two-column-card-outer-padding-percent)

    width: 49.5vw
    @include safe-area-width-in-vw-percent(0.495)

    @media (max-width: 540px) and (orientation: portrait)
      padding: $one-column-card-outer-padding
      @include safe-area-padding-in-vw-percent($one-column-card-outer-padding-percent)

      width: 98vw
      @include safe-area-width-in-vw-percent(0.98)

    @media (min-width: 768px) and (orientation: landscape)
      padding: $three-column-card-outer-padding
      @include safe-area-padding-in-vw-percent($three-column-card-outer-padding-percent)

      width: 33vw
      @include safe-area-width-in-vw-percent(0.33)
