/*

* # Semantic - Message
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘collection’; @element : ‘message’;

@import ‘../../theme.config’;

/*******************************

Message

*******************************/

.ui.message {

position: relative;
min-height: 1em;
margin: @verticalMargin 0em;
background: @background;
padding: @verticalPadding @horizontalPadding;
line-height: @lineHeight;
color: @textColor;
transition: @transition;
border-radius: @borderRadius;
box-shadow: @boxShadow;

}

.ui.message:first-child {

margin-top: 0em;

} .ui.message:last-child {

margin-bottom: 0em;

}

/*————–

Content

—————*/

/* Header */ .ui.message .header {

display: @headerDisplay;
font-family: @headerFont;
font-weight: @headerFontWeight;
margin: 0em 0em @headerDistance 0em;

}

/* Default font size */ .ui.message .header:not(.ui) {

font-size: @headerFontSize;

}

/* Paragraph */ .ui.message p {

opacity: @messageTextOpacity;
margin: @messageParagraphMargin 0em;

} .ui.message p:first-child {

margin-top: 0em;

} .ui.message p:last-child {

margin-bottom: 0em;

} .ui.message .header + p {

margin-top: @headerParagraphDistance;

}

/* List */ .ui.message ul.list {

opacity: @listOpacity;
list-style-position: @listStylePosition;
margin: @listMargin 0em 0em;
padding: 0em;

} .ui.message ul.list:first-child {

margin-top: 0em;

} .ui.message ul.list:last-child {

margin-bottom: 0em;

} .ui.message ul.list li {

position: relative;
list-style-type: none;
margin: 0em 0em @listItemMargin @listItemIndent;
padding: 0em;

} .ui.message ul.list li:before {

position: absolute;
content: '•';
left: -1em;
height: 100%;
vertical-align: baseline;

} .ui.message ul.list li:last-child {

margin-bottom: 0em;

}

/* Icon */ .ui.message > .icon {

margin-right: @iconDistance;

}

/* Close Icon */ .ui.message > .close.icon {

cursor: pointer;
position: absolute;
margin: 0em;
top: @closeTopDistance;
right: @closeRightDistance;
opacity: @closeOpacity;
transition:
  opacity 0.1s linear
;

} .ui.message > .close.icon:hover {

opacity: 1;

}

/* First / Last Element */ .ui.message > :first-child {

margin-top: 0em;

} .ui.message > :last-child {

margin-bottom: 0em;

}

/*******************************

States

*******************************/

/*————–

Visible

—————*/

.ui.message.visible {

display: block;

}

.ui.icon.message.visible {

display: table;

}

/*————–

Hidden

—————*/

.ui.message.hidden {

display: none;

}

/*******************************

Variations

*******************************/

/*————–

Compact

—————*/

.ui.compact.message {

display: inline-block;

}

/*————–

Attached

—————*/

.ui.attached.message {

margin-bottom: @attachedYOffset;
border-radius: @borderRadius @borderRadius 0em 0em;
box-shadow: @attachedBoxShadow;
margin-left: @attachedXOffset;
margin-right: @attachedXOffset;

} .ui.attached + .ui.attached.message:not(.top):not(.bottom) {

margin-top: @attachedYOffset;
border-radius: 0em;

} .ui.bottom.attached.message {

margin-top: @attachedYOffset;
border-radius: 0em 0em @borderRadius @borderRadius;
box-shadow: @attachedBottomBoxShadow;

} .ui.bottom.attached.message:not(:last-child) {

margin-bottom: @verticalMargin;

} .ui.attached.icon.message {

display: block;
width: auto;

}

/*————–

Icon

—————*/

.ui.icon.message {

display: table;
width: 100%;

} .ui.icon.message > .icon:not(.close) {

display: table-cell;
width: auto;
vertical-align: @iconVerticalAlign;
font-size: @iconSize;
opacity: @iconOpacity;

} .ui.icon.message > .content {

display: table-cell;
width: 100%;
vertical-align: @iconVerticalAlign;

}

.ui.icon.message .icon:not(.close) + .content {

padding-left: @iconContentDistance;

} .ui.icon.message .circular.icon {

width: 1em;

} .ui.icon.message .circular.icon + .content {

width: auto;
padding-left: @circularIconContentDistance;

}

/*————–

Floating

—————*/

.ui.floating.message {

box-shadow: @floatingBoxShadow;

}

/*————–

Colors

—————*/

.ui.black.message {

background-color: @black;
color: @invertedTextColor;

}

/*————–

Types

—————*/

/* Positive */ .ui.positive.message {

background-color: @positiveBackgroundColor;
color: @positiveTextColor;

} .ui.positive.message, .ui.attached.positive.message {

box-shadow:
  0px 0px 0px 1px @positiveBorderColor inset,
  @subtleShadow
;

} .ui.positive.message .header {

color: @positiveHeaderColor;

}

/* Negative */ .ui.negative.message {

background-color: @negativeBackgroundColor;
color: @negativeTextColor;

} .ui.negative.message, .ui.attached.negative.message {

box-shadow:
  0px 0px 0px 1px @negativeBorderColor inset,
  @subtleShadow
;

} .ui.negative.message .header {

color: @negativeHeaderColor;

}

/* Info */ .ui.info.message {

background-color: @infoBackgroundColor;
color: @infoTextColor;

} .ui.info.message, .ui.attached.info.message {

box-shadow:
  0px 0px 0px 1px @infoBorderColor inset,
  @subtleShadow
;

} .ui.info.message .header {

color: @infoHeaderColor;

}

/* Warning */ .ui.warning.message {

background-color: @warningBackgroundColor;
color: @warningTextColor;

} .ui.warning.message, .ui.attached.warning.message {

box-shadow:
  0px 0px 0px 1px @warningBorderColor inset,
  @subtleShadow
;

} .ui.warning.message .header {

color: @warningHeaderColor;

}

/* Error */ .ui.error.message {

background-color: @errorBackgroundColor;
color: @errorTextColor;

} .ui.error.message, .ui.attached.error.message {

box-shadow:
  0px 0px 0px 1px @errorBorderColor inset,
  @subtleShadow
;

} .ui.error.message .header {

color: @errorHeaderColor;

}

/* Success */ .ui.success.message {

background-color: @successBackgroundColor;
color: @successTextColor;

} .ui.success.message, .ui.attached.success.message {

box-shadow:
  0px 0px 0px 1px @successBorderColor inset,
  @subtleShadow
;

} .ui.success.message .header {

color: @successHeaderColor;

}

/* Colors */ .ui.inverted.message, .ui.black.message {

background-color: @black;
color: @invertedTextColor;

}

.ui.blue.message {

background-color: @blueBackground;
color: @blueTextColor;

} .ui.blue.message .header {

color: @blueHeaderColor;

} .ui.green.message {

background-color: @greenBackground;
color: @greenTextColor;

} .ui.green.message .header {

color: @greenHeaderColor;

} .ui.orange.message {

background-color: @orangeBackground;
color: @orangeTextColor;

} .ui.orange.message .header {

color: @orangeHeaderColor;

} .ui.pink.message {

background-color: @pinkBackground;
color: @pinkTextColor;

} .ui.pink.message .header {

color: @pinkHeaderColor;

} .ui.purple.message {

background-color: @purpleBackground;
color: @purpleTextColor;

} .ui.purple.message .header {

color: @purpleHeaderColor;

} .ui.red.message {

background-color: @redBackground;
color: @redTextColor;

} .ui.red.message .header {

color: @redHeaderColor;

} .ui.teal.message {

background-color: @tealBackground;
color: @tealTextColor;

} .ui.teal.message .header {

color: @tealHeaderColor;

} .ui.yellow.message {

background-color: @yellowBackground;
color: @yellowTextColor;

} .ui.yellow.message .header {

color: @yellowHeaderColor;

}

/*————–

Sizes

—————*/

.ui.small.message {

font-size: @relativeSmall;

} .ui.message {

font-size: @relativeMedium;

} .ui.large.message {

font-size: @relativeLarge;

} .ui.huge.message {

font-size: @relativeHuge;

} .ui.massive.message {

font-size: @relativeMassive;

}

.loadUIOverrides();