@use 'sass:math';

@import '../../lib/commonStyles/layout.scss';
.media {
  // Proper spacing between instances of .media
  margin-top: 15px;
  &:first-child {
    margin-top: 0;
  }
}

.media.flex {
  padding: 0;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  .mediaBody {
    flex-grow: 1;
    // overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mediaRight,
  .mediaLeft {
    flex-shrink: 0;
  }
  .mediaTop {
    align-self: flex-start;
  }
  .mediaMiddle {
    // align-self: center;
  }
  .mediaBottom {
    align-self: flex-end;
  }
}

.media,
.mediaBody {
  zoom: 1;
  // overflow: hidden;
}

.mediaBody {
  width: 10000px;
}

.mediaObject {
  display: block; // Fix collapse in webkit from max-width: 100% and display: table-cell.
  &.img-thumbnail {
    max-width: none;
  }
}

.mediaRight {
  padding-left: math.div($container-padding-left, 2);
}

.mediaLeft {
  padding-right: math.div($container-padding-right, 2);
}

.mediaLeft,
.mediaRight,
.mediaBody {
  display: table-cell;
  vertical-align: top;
}

.mediaMiddle {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.mediaBottom {
  vertical-align: bottom;
}

// Reset margins on headings for tighter default spacing
.mediaHeading {
  margin-top: 0;
  margin-bottom: 5px;
}

// Media list variation
//
// Undo default ul/ol styles
.mediaList {
  padding-left: 0;
  list-style: none;
}