@import "compass";

$bg: #bbb;
$bg-hover: #999;
$color: #fff;

.disqussion {
  padding: 5px 10px 10px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 16px;
  font-size: 13px;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  z-index: 7;
  a {
    opacity: 0;
    display: block;
    overflow: hidden;
    width: 20px;
    height: 17px;
    color: $color;
    text-decoration: none;
    cursor: pointer;
    background: $bg;
    @include border-radius(2px);
    @include transition(all .5s);
    &.has-comments {
      opacity: .8;
    }
    .disqussion-contain:hover & {
      opacity: 1;
    }
    &:after {
      border-left: 7px solid transparent;
      border-top: 7px solid $bg;
      left: 19px;
      top: 22px;
      height: 0;
      width: 0;
      display: block;
      content: " ";
      position: absolute;
      @include transition(all .5s);
    }
  }
  &:hover a,
  &.hovered a {
    opacity: 1;
    background: $bg-hover;
    &:after {
      border-top-color: $bg-hover;
    }
  }
}

#disqussions_wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

#disqus_thread.positioned {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 15px 0 15px;
  @include box-sizing(border-box);
  .disqussion-highlight & {
    background: #fff;
    z-index: 9;
  }
}

#disqussions_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(#000, .5);
  z-index: 8;
  display: none;
}

.disqussion-highlighted {
  position: relative;
  background: #fff;
  z-index: 9;
}