@import "src/style/vars_mixins";
@import "../helpers/helpers";

.deck {

  .thread-item {
    display: grid;
    grid-template-columns: 1fr;

    &:hover:not(.pure) {
      background-color: rgba($primary, 0.05);
    }

    &-header, &-parent {
      display: grid;
      grid-template-areas:
        "avatar username date"
        "avatar host date";
      grid-gap: 0 1rem;
      grid-template-columns: 35px 1fr min-content;

      @include padding(1rem);

      .user-avatar {
        grid-area: avatar;
      }

      .host {
        grid-area: host;

        @include font-size(0.75rem);

        > a {
          color: $secondary;
        }
      }

      .username {
        grid-area: username;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.25rem;

        span {
          color: $secondary;
        }

        @include font-size(0.875rem);
      }

      .date {
        grid-area: date;
        font-weight: bold;
        opacity: 0.5;

        @include font-size(0.75rem);
      }

      .date, .host {
        a {
          color: $secondary;
          border-bottom: 1px solid transparent;

          &::after {
            content: none;
          }

          &:hover {
            border-color: $secondary;
          }
        }
      }

      .you {
        color: $secondary;

        @include font-size(0.75rem);
      }
    }

    &-parent {
      grid-template-areas: "avatar host";
      grid-template-columns: 35px 1fr;

      .username {
        color: $secondary;

        @include font-size(0.75rem);
      }

      .host {
        text-align: left;

        @include padding(0);
        @include font-size(0.875rem);
      }

      .user-avatar {
        justify-self: center;
      }
    }

    &-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;

      > div {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
      }

      @include padding-left(1rem);
      @include padding-right(1rem);
      @include padding-bottom(1rem);

      button, .entry-votes, .entry-vote-btn {
        color: $secondary;

        @include padding(0);
        @include font-size(0.75rem);
        @include margin(0);

        &:hover, &:active {
          color: $primary;
        }
      }

      .entry-votes svg {
        opacity: 1;

        @include margin(0);
        @include margin-right(0.25rem);
      }

      svg {
        width: 1rem;
        height: 1rem;
      }

      @include compact_vote_slider();
    }

    &-body {
      @include padding(1rem);
      @include padding-top(0);
    }

    &-show-replies {
      .btn {
        text-transform: uppercase;
        font-weight: bold;

        @include font-size(0.675rem);
      }
    }

    .thread-render {
      display: grid;

      line-height: 1.5;
      overflow-wrap: break-word;
      word-break: break-word;

      @include font-size(0.875rem);

      * {
        @include font-size(0.875rem);
      }

      .markdown-tag-link, .markdown-post-link, .markdown-external-link, .markdown-author-link {
        color: $primary;
        cursor: pointer;

        &::after {
          content: none;
        }
      }

      .markdown-tag-link, .markdown-author-link, .markdown-currency {
        font-weight: 500;
        background-color: rgba($primary, 0.1);
        text-transform: uppercase;

        @include padding-top(0.125rem);
        @include padding-bottom(0.125rem);
        @include padding-left(0.4rem);
        @include padding-right(0.4rem);
        @include border-radius(0.5rem);
        @include font-size(0.75rem);

        &:hover {
          background-color: rgba($primary, 0.15);
        }
      }

      .markdown-currency {
        background-color: rgba($secondary, 0.1);

        span:not(.value) {
          opacity: 0.5;
        }

        .value {
          font-weight: bold;
          color: $primary;

          @include font-size(0.75rem);
          @include margin-left(0.25rem);
        }

        &:hover {
          background-color: rgba($secondary, 0.1);
        }
      }

      .markdown-author-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-weight: bold;

        @include padding-left(0.25rem);
        @include border-radius(1rem);
      }

      p {
        &:last-child {
          @include margin-bottom(0);
        }

        > img {
          @include margin-top(1rem);
          @include margin-bottom(1rem);
        }

        img {
          width: 100%;

          @include border-radius(1rem);

          &:last-child {
            @include margin-bottom(0);
          }

          &:first-child {
            @include margin-top(0);
          }
        }
      }

      img {
        cursor: pointer;
        transition: 0.3s;
        max-height: 300px;
        object-fit: cover;

        &:hover {
          box-shadow: 0 6px 20px -10px rgba(0,0,0,.5);
        }
      }

      .youtube-shorts-iframe {
        border-radius: 1rem;
      }

      .markdown-video-play {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(data:image/png;base64, ) no-repeat center center;
        cursor: pointer;
        z-index: 2;
        left: 0;
        top: 0;
      }

      .deck-thread-post-item {
        width: 100%;
        background-color: rgba($primary, 0.1);

        @include margin-top(0.25rem);
        @include margin-bottom(0.25rem);
        @include border-radius(1rem);
        @include padding(1rem);

        &:hover {
          background-color: rgba($primary, 0.15);
        }

        .image {
          height: 200px;
          width: 100%;
          background-size: cover;
          @apply bg-white;
          background-image: url(../../../../img/noimage.png);
          background-position: center;

          @include border-radius(0.5rem);
        }

        .title {
          @include font-size(1.125rem);

          @keyframes thread-post-item-skeleton-loader {
            0% {
              background-color: rgba($primary, 0.15);
            }

            50% {
              background-color: rgba($primary, 0.2);
            }

            100% {
              background-color: rgba($primary, 0.15);
            }
          }

          &.loading {
            height: 27px;
            animation: thread-post-item-skeleton-loader 1s infinite;
          }
        }

        .description {
          @apply text-gray-600;

          @include font-size(0.75rem);

          &.loading {
            height: 2rem;
            animation: thread-post-item-skeleton-loader 1s infinite;
          }
        }
      }
    }

    &.has-parent {
      .thread-item-body, .thread-item-actions {
        border-left: 2px solid $border-color;

        margin-left: calc(1rem + 16.5px);
        padding-left: 2.125rem;
      }
    }

    &.pending {
      @apply bg-gray-100;

      @include themify(night) {
        @apply bg-gray-800;
      }
    }

    .updated-label {
      color: $secondary;
      opacity: 0.75;

      @include font-size(0.75rem);
    }
  }

  .virtual-list-item {

    a[target=_blank]:after {
      content: none;
    }

    .date {
      font-weight: bold;
      opacity: 0.5;

      a {
        color: $secondary;

        @include font-size(0.75rem);

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .custom-dropdown .dropdown-btn .menu-down {
    width: auto;
    height: auto;
  }
}

.deck-full-image-view {
  position: fixed;
  transition: 0.4s;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  z-index: $zindex-modal;

  &.show {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);

    > img {
      display: block;
      margin-top: 2rem;
      width: 100% !important;
      height: min(calc(100vh - 4rem), 768px) !important;
      transform: translate(0, 0) !important;
    }
  }

  > img {
    object-fit: contain;
    transition: 0.4s;
    position: fixed;
  }
}