//  C O N T A I N E R S

.media-grid { // sass-lint:disable-line no-empty-rulesets
}

.media-list { // sass-lint:disable-line no-empty-rulesets
}

.media-row { // sass-lint:disable-line no-empty-rulesets
}



.media {
  position: relative;

  //  M O D I F I E R S

  &--large {
    display: flex;
    font-size: 1.5rem;

    .media__info {
      width: calc(100% - 20rem);
      margin-left: var(--spacing-s); // 1rem;
    }

    .media__thumb {
      width: 40rem;
      margin-bottom: var(--spacing-s); // 1rem;
    }
  }

  &--placeholder {
    > * {
      @include placeholder;
    }

    .media__channel,
    .media__date,
    .media__title {
      min-height: 1rem;
    }

    .media__channel {
      width: 70%;
    }

    .media__date {
      width: 30%;
    }

    .media__title {
      width: 100%;
    }
  }

  &--small {
    display: flex;
    justify-content: space-between;

    &:not(:last-of-type) {
      margin-bottom: var(--spacing-s); // 1rem;
    }

    .media__info {
      width: 50%;
      padding-left: var(--spacing-s); // 1rem;
    }

    .media__properties {
      bottom: -1.5rem; left: calc(-100% - 1.5rem);
      position: absolute;
    }

    .media__thumb {
      width: 50%;
    }

    .media__title {
      height: 3rem;
      line-height: 1.33;
    }
  }

  &--wide { // .media--search-result
    display: flex;

    &:not(:last-of-type) {
      margin-bottom: var(--spacing-m); // 1.5rem;
    }

    .media__info {
      width: calc(100% - 20rem);
      margin-left: var(--spacing-s); // 1rem;
    }

    .media__properties {
      bottom: -5.5rem; left: -20rem;
      position: absolute;
    }

    .media__text { // .media__subtext
      padding-top: var(--spacing-s); // 1rem;
    }

    .media__thumb {
      width: 20rem;
    }

    .media__title {
      font-size: 1.5rem;
    }
  }



  //  C H I L D R E N

  &__actions {
    display: flex;
    padding-top: var(--spacing-m); // 2rem;
    padding-bottom: var(--spacing-m); // 2rem;
  }

  &__content { // sass-lint:disable-line no-empty-rulesets
  }

  &__date { // sass-lint:disable-line no-empty-rulesets
  }

  &__info {
    word-wrap: break-word;

    [data-mode="dark"] & {
      border-color: rgba($lbry-gray-5, 0.2);
    }
  }

  &__message {
    padding: var(--spacing-s); // 1rem;
    font-size: 0.9rem;
    white-space: normal;
  }

  &__properties {
    vertical-align: top;

    > *:not(:last-child) {
      margin-right: var(--spacing-xs); // 0.5rem;
    }

    &:not(:empty) {
      display: inline-block;
    }
  }

  &__property { // sass-lint:disable-line no-empty-rulesets
  }

  &__subtitle {
    position: relative;
  }

  &__text {
    font-size: 2.5rem;

    [data-mode="dark"] & {
      color: $lbry-white;
    }
  }

  &__thumb {
    @include thumbnail;
  }

  &__title {
    font-weight: 600;
    white-space: normal;
  }
}