/* ==========================================================================
 * Feed
 * ========================================================================== */

.mds-c-feed {
  margin-left: var(--mds-d-spacing--xxl);

  & & {
    margin-top: var(--mds-d-spacing--lg);
  }

  &:empty {
    display: none;
  }

  &__item {
    /* align-items: stretch; */
    display: flex;
    overflow: hidden;

    /* flex-wrap: wrap; */
    position: relative;

    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--lg);
    }
  }

  &__avatar {
    flex-shrink: 0;
    margin-right: var(--mds-d-spacing--sm);
  }

  &__content {
    @mixin mds-m-text--size-med;

    align-items: flex-start;
    color: var(--mds-t-text-color--primary);
    display: flex;
    flex-basis: 0;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin: calc(var(--mds-d-spacing--xs) * -1);
    overflow: hidden;
    padding: var(--mds-d-spacing--xs);

    > .mds-c-textarea:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--xxs);
    }
  }

  &__description {
    margin-bottom: -2px; /* Center align text with avatar when feed content contains only a description */
    margin-top: -2px; /* Center align text with avatar when feed content contains only a description */
    overflow-wrap: break-word;
    width: 100%;

    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--xs);
    }
  }

  /* To be deprecated */
  &__name {
    font-weight: var(--mds-d-font-weight--semibold);
  }

  &__quote {
    background-color: var(--mds-t-background-color--secondary);
    border-radius: var(--mds-d-border-radius--default);
    margin-bottom: var(--mds-d-spacing--xs);
    margin-top: var(--mds-d-spacing--xs);
    padding: var(--mds-d-spacing--sm) var(--mds-d-spacing--med);
    width: 100%;

    > .mds-c-content > * {
      overflow-wrap: break-word;
      white-space: pre-wrap; /* So that comments can have new lines. */
    }
  }

  &__toolbar {
    @mixin mds-m-text--size-sm;

    color: var(--mds-t-text-color--tertiary);
  }

  &__status {
    font-size: 1rem;
    padding-right: var(--mds-d-spacing--med);
  }

  &__ellipsis {
    margin-right: var(--mds-d-spacing--xs);
    margin-top: var(--mds-d-spacing--xs);
    padding-left: var(--mds-d-spacing--xs);
  }

  &__vertical-line {
    border-right: 1px solid var(--mds-t-border-color--secondary);
    height: calc(100% - (var(--mds-d-spacing--med) * 2));
    margin: var(--mds-d-spacing--med) 0;
    overflow: auto;
    width: 50%;
  }
}