/*!
_comments.scss
Source file (relative to compiled *.css file): ./scss/_comments.scss

This file is included in PhotoBerry Studio. For licensing and copyright notices, please see ../../license.txt (relative to *.css file) or ../../../license.txt (relative to *.scss file).
*/

.photoberry-lightbox-open #photoberry-item-comments.photoberry-studio-active {
  display : block;
  }

#photoberry-item-comments {

  display : none;

  // Title
  h2 {
    font-size   : 16px;
    font-weight : 600;
    padding     : 0 0 20px;
    margin      : 20px 0 20px 0;
    font-family : var(--ps-font-family);
    }

  // Comments Title
  h3 {
    font-size   : 14px;
    font-weight : 500;
    }

  .photoberry-studio-gallery-side-footer {
    padding-right : 15px;

    > .photoberry-studio-notice {
      button {
          display: inline-block;
          font-size: 14px;
          min-width : unset;
          text-decoration: underline;
        }
      }
    }

  // Don't show textarea, only notice for guests
  .photoberry-studio-gallery-side-footer:has(#photoberry-studio-auth-prompt) #photoberry-item-comment-form { display: none; }
  }

#photoberry-item-comment-form {
  position : relative;
  width    : inherit;

  button {
    @include button(primary, small, false);
    }

  .photoberry-item-comment-form-button-wrapper {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    width       : inherit;

    button {
      margin-left : auto;
      }
    }

  .photoberry-studio-new-comment-author {
    display     : flex;
    align-items : center;
    font-size   : 12px;
    gap         : 6px;
    text-decoration: none;
    line-height: 18px;
    color: var(--ps-font-color);

    &:focus {
        outline: none;
      }

    img {
      margin-bottom : 0;
      border-radius : 50%;
      width: 18px;
      height: 18px;
      }

    span {
      display     : flex;
      align-items : center;
      gap         : 3px;
      }
    }

  textarea {
    @include input;

    & {
      display: block;
      line-height : 1.3em;
      max-height  : 180px;
      overflow-y  : auto;
      font-size   : 13px;
      padding     : 8px 10px;
      width       : inherit;
      box-sizing  : border-box;
      margin-bottom: 10px;
      }
    }
  }

@media (max-width : 799px) {

  #photoberry-item-comments {
    .photoberry-studio-gallery-side-footer {
      padding-right : 0;
      }

    #photoberry-item-comment-form {
      width : 100%;
      }
    }
  }

// Comments List

ol#photoberry-item-comments-list {
  list-style : none;
  padding    : 0;
  margin     : 0;
  display    : table;

  // Single Comment
  li {
    font-size      : 13px;
    display        : block;
    vertical-align : top;
    margin-bottom  : 25px;
    }

  // Avatar
  img.photoberry-item-comment-avatar {
    border-radius  : 50%;
    margin         : 0 10px 0 0;
    vertical-align : top;
    width: 24px;
    }

  .photoberry-item-comment-content-wrapper {
    display : inline-block;
    width: calc(100% - 34px);
    }

  .photoberry-item-comment-author {
    font-weight  : bold;
    display      : inline-block;
    font-size    : 13px;
    margin-right : 5px;
    }

  .photoberry-item-comment-time {
    color     : #5A607F;
    display   : inline-block;
    font-size : 11px;
    }

  .photoberry-item-comment-content p {
    margin : 5px 0 0;
    }

  // Empty comments

  .photoberry-studio-comments-empty {
    padding         : 15vh 20px;
    text-align      : center;
    color           : var(--ps-secondary-color);
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    height          : 100%;

    h4 {
      margin      : 0 0 20px;
      padding     : 0;
      color       : var(--ps-secondary-color);
      font-family : var(--ps-font-family);
      font-size   : 16px;
      font-weight : bold;
      }

    p {
      font-size : 14px;
      margin    : 0;
      padding   : 0;
      color     : var(--ps-secondary-color);
      }
    }

  }