@import '../../themes/default/collections/message.variables';

@if $use-message {
  /*******************************
  //@-        Message
  *******************************/

  .ui.message {
    position: relative;
    min-height: 1em;
    margin: $message-vertical-margin 0;
    background: $message-background;
    padding: $message-padding;
    line-height: $line-height;
    color: $text-color;
    transition: $message-transition;
    border-radius: $message-border-radius;
    box-shadow: $message-box-shadow;
  }

  .ui.message:first-child {
    margin-top: 0;
  }
  .ui.message:last-child {
    margin-bottom: 0;
  }


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

  /* Header */
  .ui.message .header {
    display: $message-header-display;
    font-family: $header-font;
    font-weight: $message-header-font-weight;
    margin: $message-header-margin;
  }

  /* Default font size */
  .ui.message .header:not(.ui) {
    font-size: $message-header-font-size;
  }

  /* Paragraph */
  .ui.message p {
    opacity: $message-text-opacity;
    margin: $message-paragraph-margin 0;
  }
  .ui.message p:first-child {
    margin-top: 0;
  }
  .ui.message p:last-child {
    margin-bottom: 0;
  }
  .ui.message .header + p {
    margin-top: $message-header-paragraph-distance;
  }

  /* List */
  .ui.message .list:not(.ui) {
    text-align: left;
    padding: 0;
    opacity: $message-list-opacity;
    list-style-position: $message-list-style-position;
    margin: $message-list-margin 0 0;
  }
  .ui.message .list:not(.ui):first-child {
    margin-top: 0;
  }
  .ui.message .list:not(.ui):last-child {
    margin-bottom: 0;
  }
  .ui.message .list:not(.ui) li {
    position: relative;
    list-style-type: none;
    margin: 0 0 $message-list-item-margin $message-list-item-indent;
    padding: 0;
  }
  .ui.message .list:not(.ui) li:before {
    position: absolute;
    content: '•';
    left: -1em;
    height: 100%;
    vertical-align: baseline;
  }
  .ui.message .list:not(.ui) li:last-child {
    margin-bottom: 0;
  }


  /* Icon */
  .ui.message > .icon {
    margin-right: $message-icon-distance;
  }

  /* Close Icon */
  .ui.message > .close.icon {
    cursor: pointer;
    position: absolute;
    margin: 0;
    top: $message-close-top-distance;
    right: $message-close-right-distance;
    opacity: $message-close-opacity;
    transition: $message-close-transition;
  }
  .ui.message > .close.icon:hover {
    opacity: 1;
  }

  /* First / Last Element */
  .ui.message > :first-child {
    margin-top: 0;
  }
  .ui.message > :last-child {
    margin-bottom: 0;
  }

  /*******************************
              Coupling
  *******************************/

  .ui.dropdown .menu > .message {
    margin: 0 (-$message-border-width);
  }

  /*******************************
              States
  *******************************/

  /*--------------
      Visible
  ---------------*/

  .ui.visible.visible.visible.visible.message {
    display: block;
  }

  .ui.icon.visible.visible.visible.visible.message {
    display: flex;
  }

  /*--------------
      Hidden
  ---------------*/

  .ui.hidden.hidden.hidden.hidden.message {
    display: none;
  }


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

  /*--------------
      Compact
  ---------------*/

  .ui.compact.message {
    display: inline-block;
  }
  .ui.compact.icon.message {
    display: inline-flex;
    width: auto;
  }


  /*--------------
      Attached
  ---------------*/

  .ui.attached.message {
    margin-bottom: $message-attached-y-offset;
    border-radius: $message-border-radius $message-border-radius 0 0;
    box-shadow: $message-attached-box-shadow;
    margin-left: $message-attached-x-offset;
    margin-right: $message-attached-x-offset;
  }
  .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
    margin-top: $message-attached-y-offset;
    border-radius: 0;
  }
  .ui.bottom.attached.message {
    margin-top: $message-attached-y-offset;
    border-radius: 0 0 $message-border-radius $message-border-radius;
    box-shadow: $message-attached-bottom-box-shadow;
  }
  .ui.bottom.attached.message:not(:last-child) {
    margin-bottom: $message-vertical-margin;
  }
  .ui.attached.icon.message {
    width: auto;
  }


  /*--------------
        Icon
  ---------------*/

  .ui.icon.message {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .ui.icon.message > .icon:not(.close) {
    display: block;
    flex: 0 0 auto;
    width: auto;
    line-height: 1;
    vertical-align: $message-icon-vertical-align;
    font-size: $message-icon-size;
    opacity: $message-icon-opacity;
  }
  .ui.icon.message > .content {
    display: block;
    flex: 1 1 auto;
    vertical-align: $message-icon-vertical-align;
  }


  .ui.icon.message .icon:not(.close) + .content {
    padding-left: $message-icon-content-distance;
  }
  .ui.icon.message .circular.icon {
    width: 1em;
  }

  /*--------------
      Floating
  ---------------*/

  .ui.floating.message {
    box-shadow: $message-floating-box-shadow;
  }


  /*--------------
      Colors
  ---------------*/

  @each $key, $value in $message-consequences {
    @if(index($use-message-variation-consequences, $key+'')) {
      $color: $key;
      $bg: map-get($value, background);
      $hd: map-get($value, header);
      $bs: map-get($value, boxShadow);
      $bfs: map-get($value, boxFloatShadow);
      $t: map-get($value, text);

      .ui.#{$key + ""}.message {
        background-color: $bg;
        color: $t;
      }

      .ui.#{$key + ""}.message,
      .ui.attached.#{$key + ""}.message {
        box-shadow: $bs;
      }

      .ui.floating.#{$key + ""}.message {
          box-shadow: $bfs;
      }

      .ui.#{$key + ""}.message .header {
        color: $hd;
      }
    }
  }

  @each $key, $value in $colors {
    @if(index(join($main-colors-names, $use-header-variation-colors), $key+'')) {
      $color: $key;
      $bg: map-get($value, background);
      $hd: map-get($value, header);
      $bs: map-get($value, boxShadow);
      $bfs: map-get($value, boxFloatShadow);
      $t: map-get($value, text);
      $isVeryDark: map-get($value, isVeryDark);

      .ui.#{$key + ""}.message {
        @if not ($isVeryDark) {
          background-color: $bg;
          color: $t;
        }
        @if ($isVeryDark) {
          background-color: $black;
          color: $inverted-text-color;
        }
      }

      .ui.#{$key + ""}.message,
      .ui.attached.#{$key + ""}.message {
        @if not ($isVeryDark) {
          box-shadow: $bs;
        }
      }

      .ui.floating.#{$key + ""}.message {
        @if not ($isVeryDark) {
          box-shadow: $bfs;
        }
      }

      .ui.#{$key + ""}.message .header {
        @if not ($isVeryDark) {
          color: $hd;
        }
        @if ($isVeryDark) {
          color: $inverted-text-color;
        }
      }
    }
  }


  .ui.inverted.message {
    background-color: $black;
    color: $inverted-text-color;
  }

  /*--------------
      Sizes
  ---------------*/

  .ui.mini.message {
    font-size: $relative-mini;
  }
  .ui.tiny.message {
    font-size: $relative-tiny;
  }
  .ui.small.message {
    font-size: $relative-small;
  }
  .ui.message {
    font-size: $relative-medium;
  }
  .ui.large.message {
    font-size: $relative-large;
  }
  .ui.big.message {
    font-size: $relative-big;
  }
  .ui.huge.message {
    font-size: $relative-huge;
  }
  .ui.massive.message {
    font-size: $relative-massive;
  }
}

@import '../../themes/default/collections/message.style';