@import "../utilities/mixins"

$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
$media-border-size: 1px !default
$media-spacing: 1rem !default
$media-spacing-large: 1.5rem !default
$media-content-spacing: 0.75rem !default
$media-level-1-spacing: 0.75rem !default
$media-level-1-content-spacing: 0.5rem !default
$media-level-2-spacing: 0.5rem !default

$css-vars-map: ('media-border-color': ($media-border-color),'media-border-size': ($media-border-size),'media-spacing': ($media-spacing),'media-spacing-large': ($media-spacing-large))
// --media-border-color: #{$media-border-color}
// --media-border-size: #{$media-border-size}
// --media-spacing: #{$media-spacing}
// --media-spacing-large: #{$media-spacing-large}

.media, [class^="media-"]
  +registerCSSVars($css-vars-map, $at-root)

.media
  align-items: flex-start
  display: flex
  text-align: inherit
  .content:not(:last-child)
    margin-bottom: $media-content-spacing
  .media
    border-top: var(--media-border-size) solid var(--media-border-color)
    display: flex
    padding-top: $media-level-1-spacing
    .content:not(:last-child),
    .control:not(:last-child)
      margin-bottom: $media-level-1-content-spacing
    .media
      padding-top: $media-level-2-spacing
      & + .media
        margin-top: $media-level-2-spacing
  & + .media
    border-top: var(--media-border-size) solid var(--media-border-color)
    margin-top: var(--media-spacing)
    padding-top: var(--media-spacing)
  // Sizes
  &.is-large
    & + .media
      margin-top: var(--media-spacing-large)
      padding-top: var(--media-spacing-large)

.media-left,
.media-right
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0

.media-left
  +ltr-property("margin", var(--media-spacing))

.media-right
  +ltr-property("margin", var(--media-spacing), false)

.media-content
  flex-basis: auto
  flex-grow: 1
  flex-shrink: 1
  text-align: inherit

+mobile
  .media-content
    overflow-x: auto