/*!
 * # Semantic UI - Feed
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
         Activity Feed
*******************************/

.ui.feed {
  margin: @feedMargin;
}
.ui.feed:first-child {
  margin-top: 0em;
}
.ui.feed:last-child {
  margin-bottom: 0em;
}


/*******************************
            Content
*******************************/

/* Event */
.ui.feed > .event {
  display: flex;
  flex-direction: row;
  width: @feedEventWidth;
  padding: @feedEventPadding;
  margin: @feedEventMargin;
  background: @feedEventBackground;
  border-top: @feedEventDivider;
}
.ui.feed > .event:first-child {
  border-top: 0px;
  padding-top: 0em;
}
.ui.feed > .event:last-child {
  padding-bottom: 0em;
}

/* Event Label */
.ui.feed > .event > .label {
  display: block;
  flex: 0 0 auto;
  width: @feedLabelWidth;
  height: @feedLabelHeight;
  align-self: @feedLabelAlignSelf;
  text-align: @feedLabelTextAlign;
}
.ui.feed > .event > .label .icon {
  opacity: @feedIconLabelOpacity;
  font-size: @feedIconLabelSize;
  width: @feedIconLabelWidth;
  padding: @feedIconLabelPadding;
  background: @feedIconLabelBackground;
  border: @feedIconLabelBorder;
  border-radius: @feedIconLabelBorderRadius;
  color: @feedIconLabelColor;
}
.ui.feed > .event > .label img {
  width: @feedImageLabelWidth;
  height: @feedImageLabelHeight;
  border-radius: @feedImageLabelBorderRadius;
}
.ui.feed > .event > .label + .content {
  margin: @feedLabeledContentMargin;
}

/*--------------
     Content
---------------*/

/* Content */
.ui.feed > .event > .content {
  display: block;
  flex: 1 1 auto;
  align-self: @feedContentAlignSelf;
  text-align: @feedContentTextAlign;
  word-wrap: @feedContentWordWrap;
}
.ui.feed > .event:last-child > .content {
  padding-bottom: @feedLastLabeledContentPadding;
}

/* Link */
.ui.feed > .event > .content a {
  cursor: pointer;
}

/*--------------
      Date
---------------*/

.ui.feed > .event > .content .date {
  margin: @feedDateMargin;
  padding: @feedDatePadding;
  color: @feedDateColor;
  font-weight: @feedDateFontWeight;
  font-size: @feedDateFontSize;
  font-style: @feedDateFontStyle;
  color: @feedDateColor;
}

/*--------------
     Summary
---------------*/

.ui.feed > .event > .content .summary {
  margin: @feedSummaryMargin;
  font-size: @feedSummaryFontSize;
  font-weight: @feedSummaryFontWeight;
  color: @feedSummaryColor;
}

/* Summary Image */
.ui.feed > .event > .content .summary img {
  display: inline-block;
  width: @feedSummaryImageWidth;
  height: @feedSummaryImageHeight;
  margin: @feedSummaryImageMargin;
  border-radius: @feedSummaryImageBorderRadius;
  vertical-align: @feedSummaryImageVerticalAlign;
}
/*--------------
      User
---------------*/

.ui.feed > .event > .content .user {
  display: inline-block;
  font-weight: @feedUserFontWeight;
  margin-right: @feedUserDistance;
  vertical-align: baseline;
}
.ui.feed > .event > .content .user img {
  margin: @feedUserImageMargin;
  width: @feedUserImageWidth;
  height: @feedUserImageHeight;
  vertical-align: @feedUserImageVerticalAlign;
}
/*--------------
   Inline Date
---------------*/

/* Date inside Summary */
.ui.feed > .event > .content .summary > .date {
  display: @feedSummaryDateDisplay;
  float: @feedSummaryDateFloat;
  font-weight: @feedSummaryDateFontWeight;
  font-size: @feedSummaryDateFontSize;
  font-style: @feedSummaryDateFontStyle;
  margin: @feedSummaryDateMargin;
  padding: @feedSummaryDatePadding;
  color: @feedSummaryDateColor;
}

/*--------------
  Extra Summary
---------------*/

.ui.feed > .event > .content .extra {
  margin: @feedExtraMargin;
  background: @feedExtraBackground;
  padding: @feedExtraPadding;
  color: @feedExtraColor;
}

/* Images */
.ui.feed > .event > .content .extra.images img {
  display: inline-block;
  margin: @feedExtraImageMargin;
  width: @feedExtraImageWidth;
}

/* Text */
.ui.feed > .event > .content .extra.text {
  padding: @feedExtraTextPadding;
  border-left: @feedExtraTextPointer;
  font-size: @feedExtraTextFontSize;
  max-width: @feedExtraTextMaxWidth;
  line-height: @feedExtraTextLineHeight;
}

/*--------------
      Meta
---------------*/

.ui.feed > .event > .content .meta {
  display: @feedMetadataDisplay;
  font-size: @feedMetadataFontSize;
  margin: @feedMetadataMargin;
  background: @feedMetadataBackground;
  border: @feedMetadataBorder;
  border-radius: @feedMetadataBorderRadius;
  box-shadow: @feedMetadataBoxShadow;
  padding: @feedMetadataPadding;
  color: @feedMetadataColor;
}

.ui.feed > .event > .content .meta > * {
  position: relative;
  margin-left: @feedMetadataElementSpacing;
}
.ui.feed > .event > .content .meta > *:after {
  content: @feedMetadataDivider;
  color: @feedMetadataDividerColor;
  top: 0em;
  left: @feedMetadataDividerOffset;
  opacity: 1;
  position: absolute;
  vertical-align: top;
}

.ui.feed > .event > .content .meta .like {
  color: @feedLikeColor;
  transition: @feedLikeTransition;
}
.ui.feed > .event > .content .meta .like:hover .icon {
  color: @feedLikeHoverColor;
}
.ui.feed > .event > .content .meta .active.like .icon {
  color: @feedLikeActiveColor;
}

/* First element */
.ui.feed > .event > .content .meta > :first-child {
  margin-left: 0em;
}
.ui.feed > .event > .content .meta > :first-child::after {
  display: none;
}

/* Action */
.ui.feed > .event > .content .meta a,
.ui.feed > .event > .content .meta > .icon {
  cursor: @feedMetadataActionCursor;
  opacity: @feedMetadataActionOpacity;
  color: @feedMetadataActionColor;
  transition: @feedMetadataActionTransition;
}
.ui.feed > .event > .content .meta a:hover,
.ui.feed > .event > .content .meta a:hover .icon,
.ui.feed > .event > .content .meta > .icon:hover {
  color: @feedMetadataActionHoverColor;
}



/*******************************
            Variations
*******************************/

.ui.small.feed {
  font-size: @small;
}
.ui.feed {
  font-size: @medium;
}
.ui.large.feed {
  font-size: @large;
}