@charset "UTF-8";
@use "../../../feature/theme/theme" as theme;
@import "../../../feature/theme/theme";
@import "../../helpers/mixins";
@import "../../helpers/variables";
@import "../../icons/icons";

.cursor-pointer {
  cursor: pointer;
}

.vertical-align-middle {
  vertical-align: middle;
}

.card-post {
  border: none;

  .card-body {
    padding: 10px 15px;
  }

  .card-header {
    padding: .5rem .75rem;
  }

  .card-footer {
    padding: .25rem;

    .btn.btn-sm {
      transition: none;
      @include color-theme(#505050, #979797);

      @include light {
        --bs-btn-active-bg:           white;
        --bs-btn-active-border-color: rgb(224, 224, 224);
        &:hover {
          background: white;
          border:     1px solid rgb(224, 224, 224);
        }
      }
      @include dark {
        --bs-btn-active-bg:           #2b2b2b;
        --bs-btn-active-border-color: #323232;
        &:hover {
          background: #2b2b2b;
          border:     1px solid #323232;
        }
      }
    }
  }

  &.is-deleted {
    .card-body, .card-header {
      opacity: .7;
    }
  }

  &.card-post-folded {
    font-size: 11px;
  }

  .post-fold-button {
    font-size: 11px;
  }

  @include media-breakpoint-down(lg) {
    &.not-read {
      @include not-read-border();
    }
  }

  i.not-read {
    @include not-read-bullet;

    margin-bottom: -2px;
    display:       inline-block;
  }
}

.post-delete,
.comment-delete,
{
  color:            $alert-warning-color;
  background-color: $alert-warning-background;
  font-size:        11px;
}

.post-author {
  @include text-truncate;

  font-size: .9rem;

  .badge {
    font-size: 90%;
    padding:   1px 5px;
  }
}

.post-stats {
  font-size:     $font-size-sm;
  margin-bottom: 0;

  li {
    padding: 2px 0;
  }

  strong {
    display:     inline-block;
    width:       50%;
    font-weight: normal;

    @include media-breakpoint-down(xl) {
      width: 100%;
    }
  }
}

.post-vote {
  vertical-align: top;
  float:          right;
  line-height:    120%;
  padding-top:    1rem;
}

.post-content {
  min-height:    89px;
  word-wrap:     break-word;
  line-height:   139%;
  overflow:      hidden;
  padding-right: 10px;
  margin-top:    -3px;

  a {
    text-decoration: underline;
    font-weight:     normal;

    &.mention {
      font-weight: bold;
    }
  }

  hr {
    margin: 15px 0 5px 0;
    width:  25%;
    @include theme.property(border-top-color, #eee, #2f2f2f);
  }

  footer {
    color:      $gray-light;
    font-size:  90%;
    background: transparent;
  }

  img:not(.img-smile) {
    display:    block;
    margin:     1rem 0;
    max-width:  min(480px, 100%);
    max-height: 320px;
    object-fit: contain;
    cursor:     pointer;
  }

  img.img-smile {
    height: 1em;
  }

  table {
    @extend .table-responsive-sm;
  }

  blockquote {
    img {
      opacity: 0.35;
    }

    pre {
      opacity: 0.5;
    }
  }

  &.preview {
    img:not(.img-smile) {
      cursor: default;
    }
  }
}

.post-comment {
  img.img-smile {
    height: 1em;
  }
}

.edit-info {
  font-size:  11px;
  padding:    5px 0;
  margin-top: 10px;

  .btn-history {
    text-decoration: none;
  }
}

.vote-count, .vote-up, .vote-accept {
  color:      lighten($gray-light, 10%);

  width:      36px;
  text-align: center;
  display:    block;
}

.vote-up, .vote-accept {
  opacity: .8;

  &:hover {
    opacity: 1;
  }
}

.vote-count {
  margin:      5px 0 15px 0;
  line-height: 120%;
}

.vote-up, .vote-count {
  font-size: $font-size-lg;
  z-index:   1; // @see https://4programmers.net/Forum/Coyote/348514-kod_zaslania_liste_lapek?p=1741365#comment-690455
}

.vote-accept {
  margin-top: 10px;
  font-size:  $font-size-lg + 1rem;

  &.on {
    color: $primary;
  }
}

@include media-breakpoint-down(md) {
  .vote-accept {
    font-size: $font-size-base + 0.6rem;
  }
}

blockquote {
  color: $gray-light;

  > h5 a {
    color:        #5e7813;
    position:     relative;
    padding-left: 16px;
    font-family:  Helvetica, sans-serif;
    font-size:    .8rem;

    &:before {
      @include content-icon-solid($icon-post-quote);
      color:    $gray;
      position: absolute;
      top:      0;
      left:     0;
      opacity:  0.8;
    }
  }
}

.youtube-player {
  display:      block;
  width:        100%;
  aspect-ratio: 16 / 9;
  max-width:    420px;
}

.comment-text a {
  word-break: break-word;
}
