@import "../../colors"; @import "../../frameless"; .social-message { margin: 0; border-bottom: 1px solid $ui-border; padding: 1rem; list-style-type: none; } .social-message-icon { opacity: .25; } .social-message.mod-unread { background-color: $ui-blue-10percent; } .social-message.mod-unread .social-message-icon { opacity: 1; } .flex-row.mod-social-message { justify-content: space-between; align-items: flex-start; } .social-message-content { display: flex; max-width: 38.75rem; text-align: left; align-items: flex-start; } .social-message-icon { margin: .2rem 1rem 0 0; min-width: 1.25rem; } a.social-messages-profile-link { color: $type-gray; &:hover { color: $link-purple; } } .flex-row.mod-comment-message { justify-content: flex-start; } .comment-text { margin-left: 1.5rem; } @media #{$small} { .social-message { text-align: left; } .social-message-date { align-self: flex-end; } .social-message-content { max-width: 100%; } } @media #{$medium} { .social-message { text-align: left; } .social-message-date { align-self: flex-end; } .social-message-content { max-width: 100%; } }