@charset "UTF-8";

@use "../../feature/theme/theme";

@mixin size($size) {
  @if ($size == 'intermediate') {
    @include media-breakpoint-only(sm) {
      @content;
    }
    @include media-breakpoint-up(xxl) {
      @content;
    }
  } @else {
    @include media-breakpoint-up($size) {
      @content;
    }
  }
}

.variable-names {
  .long-name {
    display: none;
    @include size(intermediate) {
      display: initial;
    }
  }

  .short-name {
    display: initial;
    @include size(intermediate) {
      display: none;
    }
  }
}

.card-reputation {
  img, svg {
    width:  40px;
    height: 40px;
  }
}

#box-forum {
  #stream-wrapper {
    @include media-breakpoint-down(lg) {
      margin-top:            20px;
      padding-left:          15px;
    }
  }

  #stream {
    height:   365px;
    position: relative;
    overflow: hidden;

    @include media-breakpoint-down(md) {
      padding-left: 15px;
    }
  }

  #box-forum-headline {
    margin-top: 20px;

    .row {
      padding: 4px 0 4px 0;
      margin:  0;

      .display-count {
        strong {
          display:    block;
          text-align: center;
          font-size:  16px;
        }

        small {
          display:    block;
          color:      #7d7d7d;
          text-align: center;
          font-size:  10px;
        }
      }
    }

    a.title {
      display: block;
      @include text-truncate();
    }

    a.category {
      font-size: 11px;
    }

    .float-end {
      color:     $gray-light;
      font-size: 10px;
    }
  }

  .recent-activity {
    margin: 10px 0 0 10px;

    @include media-breakpoint-down(md) {
      border-left: none;
      margin-left: 0;
    }
  }

  .media {
    padding:   0 0 0 20px;
    font-size: 11px;
    position:  relative;
    overflow:  visible;

    &:not(:first-child) {
      margin-top: 15px;
    }

    .homepage-activity {
      border-radius: 50%;
      position:      absolute;
      width:         20px;
      height:        20px;
      left:          -11px;
      top:           8px;

      &::selection {
        text-shadow: none;
      }
    }

    @include media-breakpoint-down(md) {
      padding: 0;
    }
  }

  .media-body {
    min-width: 0; // makes flex children not exceed parent width

    p {
      margin: 0;
      @include text-truncate();
    }

    strong {
      font-weight: normal;
      padding:     0 0 0 10px;
      margin:      10px 0 0 1px;
      display:     block;
      font-family: "Open Sans", sans-serif;
    }
  }
}
