@import "src/style/vars_mixins";

.profile-container {
    z-index: 4;

  @media (max-width: $sm-break) {
    position: absolute;
    top: unset;
    width: 100%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }

  @media (min-width: 577px) and (max-width: 1000px) {
    width: 100%;
  }
}

.profile-img{
    min-height: 90px;
    min-width: 90px;
    border: 5px solid #81acef;
    @apply bg-white;
    @include themify(night) {
      @apply bg-gunmetal;
    }

    @media (max-width: $sm-break) {
      min-height: 120px;
      min-width: 120px;
    }
    @media (max-width: 320px) {
      min-height: 80px;
      min-width: 80px;
    }
}

.cover-img {
    height: 100px;
    @media (max-width: $sm-break) {
      height: 130px;
    }
    @media (max-width: 320px) {
      height: 75px;
    }
}

.info-container {
    position: relative;
    top: -82px;
    margin-bottom: -72px;
    @media (max-width: 320px) {
      top: -50px;
      margin-bottom: -50px;
    }
}

.no-image {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        height: 80px;
        width: 80px;
    }
}

.bg-white {
    @include themify(night) {
      @apply bg-dark-200;
      }
}

.cover-img-placeholder {
    width: 100%;
    height: 100px;
}

.loading-md {
    width: 70px;
    height: 8px;
}

.flex-grow-1 {
    flex: 1;
}

.profile-parent {
  @media (max-width: $sm-break) {
    background-color: rgb(0 0 0 / 85%);
    position: relative;
    height: 100vh;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
  }
}

.close-icon {
  display: none;

  @media (max-width: $sm-break) {
    width: 30px;
    padding: 5px;
    @apply bg-white;
    @apply text-dark-200;
    position: absolute;
    left: 20px;
    top: 13px;
    display: block;
  }
}

.overflow-sm-hidden {
  @media (max-width: $sm-break) {
    overflow: hidden;
  }
  .discussion {
    @media (max-width: $sm-break) {
      position: unset;
    }
  }
}

.limited-about-text {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rounded-top {
  @media (max-width: $sm-break) {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
}

.about-container {
  @media (max-width: $sm-break) {
    min-height: 51px;
  }
}

.upper-container {
  @media (max-width: 320px) {
    a {
      font-size: 0.75rem;
    }
    div {
      font-size: 0.75rem;
    }
    button {
      font-size: 0.75rem !important;
    }
    .mb-3 {
      margin-bottom: 0.5rem !important;
    }
    .mt-3 {
      margin-top: 0.5rem !important;
    }
    .border-b {
      padding-bottom: 1rem !important;
    }
  }
}

.upper-container .p-3 {
  @media (max-width: 320px) {
    padding-bottom: 0px !important;
  }
}

.text-break-wrap {
  @media (max-width: 1600px) {
    word-break: break-all;
  }
}