/* Dimensions */
$border-size: 2px;
$avatar-size: 28px;
$avatar-image-size: $avatar-size - (2 * $border-size);
$chain-margin: 10px;

/* Colours */
$status-online: #4caf50;
$status-away: #ff6d00;
$status-dnd: #f44336;
$status-offline: #555;

.shoutbox-opacity-transition {
  opacity: 0;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.shoutbox-avatar {
  border-radius: 50%;
  width: $avatar-size;
  height: $avatar-size;
  .avatar {
    border: $border-size solid $status-offline;
  }

  &.online .avatar {
    border: $border-size solid $status-online;
  }

  &.away .avatar {
    border: $border-size solid $status-away;
  }

  &.dnd .avatar {
    border: $border-size solid $status-dnd;
  }

  &.offline .avatar {
    border: $border-size solid $status-offline;
  }

  .shoutbox-avatar-overlay {
    background-color: black;
    width: $avatar-size;
    height: $avatar-size;
    border-radius: inherit;
    text-align: center;
    line-height: $avatar-image-size + $border-size * 2;
  }

  &.isTyping {
    .shoutbox-avatar-overlay {
      opacity: 0.6;
    }

    .shoutbox-avatar-typing {
      opacity: 1;
    }
  }

  .shoutbox-avatar-overlay, .shoutbox-avatar-typing {
    @extend .shoutbox-opacity-transition;
  }
}

[data-widget-area] {
  .shoutbox {
    .card {
      height: 400px!important;
    }
    .shoutbox-content {

      overflow-y: scroll;
      padding-top: 0;
      position: relative;
      & p {
        margin: 0;
      }
    }
  }
}

.shoutbox-shout {
  .shoutbox-shout-text {
    .plugin-mentions-user {
      font-weight: bold;
    }
  }

  .shoutbox-shout-edited p:after {
    content: "\f040";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 10px;
    text-rendering: auto;
    color: $text-muted;
    margin-left: 5px;
  }

  .shoutbox-shout-options {
    @extend .shoutbox-opacity-transition;
    white-space: nowrap;
  }

  &:hover {
    .shoutbox-shout-options, .shoutbox-shout-edited p:after {
      opacity: 1;
    }
  }

  p {
    margin: 0;
  }
}

.shoutbox {
  .card {
    height: calc(70vh - var(--panel-offset));
    overflow: hidden;
  }

  &-content {
    overflow-y: auto;
    padding-top: 0;
    position: relative;

    & p {
      margin: 0;
    }
  }

  .shoutbox-content-container {
    .shoutbox-content-overlay {
      @extend .shoutbox-opacity-transition;
      z-index: 1;
      visibility: hidden;

      &.active {
        opacity: 0.9;
        visibility: visible;
        transition-delay: 0s;
      }
    }
  }
}