.embed {
  padding: 0 $gap;
  height: $comment_height;
  width: 100%;
  box-sizing: border-box;
  background: 50% 50% no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: $gap / 4 0 !important;

  &:last-child {
    margin-bottom: 0 !important;
  }

  &:first-child {
    margin-top: 0 !important;
  }

  a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
  }

  svg {
    fill: white;
    position: relative;
    z-index: 6;
  }
}

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparentize($comment_bg, 0.15) 50% 50%;
  background-size: cover;
  z-index: 15;
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: $font_16_medium;
  flex-direction: row;

  @include outer_shadow();
}

.preview {
  padding: 0 $gap / 2 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  z-index: 2;

  & > div {
    width: 100%;
    border-radius: $radius;
    position: relative;
    background-position: 50% 50%;
    background-size: cover;
  }
}

.play {
  flex: 0 0 $comment_height - $gap;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  flex: 1;
  text-align: left;
  box-sizing: border-box;
  font: $font_18_semibold;
  padding: 0 $gap 0 $gap * 1.5;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}