@import "src/style/vars_mixins";

.avatar-fixed {
    position: fixed;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    top: 120px;
    left: 90px;
    height: auto;
    max-height: 400px;
    width: 230px;
    background-color: inherit;
    color: inherit;
    font-size: inherit;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    &.visible {
      opacity: 1;
    }
    @media (max-width: $xl-break) {
      display: none;
    }
    @media (max-width: $xxl-break) {
      left: 2.5%;
      width: 180px;
      overflow-x: hidden;
      font-size: inherit;
      .user-info {
        margin-left: 0.5rem!important;
      }
      .author-name {
        font-size: 0.8rem;
      }
      .author-reputation {
        font-size: 0.8rem;
      }
    }
    @media (min-width: $xxl-break) {
      left: 6%;
    }
    @media (min-width: 1600px) {
      left: 7.5%;
    }
    @media (min-width: 1700px) {
      left: 8.5%;
    }
    @media (min-width: 1800px) {
      left: 9.5%;
    }
    @media (min-width: 2000px) {
      left: 11.5%;
    }
    @media (min-width: 2200px) {
      left: 14.5%;
    }
    @media (min-width: 2500px) {
      left: 17.5%;
    }
    @media (min-width: 3000px) {
      left: 25%;
    }
    a {
      color: inherit;
    }
    .first-line, .second-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 0 0 1rem 0;
      .user-info {
        margin-left: 1rem;
        font-weight: 700;
        word-break: keep-all;
      }
      .author-reputation{
        font-weight: 500;
        margin-left: 0.5rem;
      }
      .entry-tag {
        width: 100%;
      }
      .name, .description {
        font-weight: 400;
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
      }
      .name {
        text-transform: capitalize;
        margin-bottom: 0.5rem;
      }
    }
    .second-line {
      border-bottom: 1px solid;
      @apply border-light-400;
    }
    
   .social-wrapper{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-top: 1rem;
      .bookmark-btn {
        margin-left: 1.5rem;
        display: none;
      }
      .btn.btn-primary:nth-child(2) {
        display: none;
      }
      .custom-dropdown {
        display: none;
      }
   }
  }

.avatar-skeleton {
  width: 40px;
  height: 40px;
}

.text-skeleton {
  width: 80px;
  height: 15px;
}
