@import './apps/commudle-admin/src/assets/styles/variables';

.user {
  align-items: flex-start;
  display: flex;
  padding: 0.5rem 0.5rem 0.5rem 0;
  position: relative;

  .profile-picture {
    display: flex;
    margin-right: 0.5rem;
    overflow: hidden;
    min-width: 48px;
    height: 48px;
    img {
      @apply com-bg-tWhite;
      width: 48px;
      height: 48px;
      left: 0px;
      top: 12px;
      border-radius: 32px;
    }

    &.medium {
      width: 48px;
      min-height: 48px;
      margin-right: 0.75rem;
    }

    &.small {
      width: 48px;
      min-height: 48px;
      margin-right: 0.5rem;
    }
  }

  .profile-info {
    @apply com-pl-2;
    max-width: 80%;
    text-align: left;
    .name {
      @apply com-flex com-flex-row com-items-center com-text-Charcoal com-p-0.5;
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      margin: 0;
      a {
        @apply com-text-Charcoal;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
      &.medium {
        font-size: 1.2rem;
      }
      &.small {
        font-size: 0.9rem;
        font-weight: 300;
      }
    }

    .designation {
      @apply com-text-Auro-Metal-Saurus com-my-1;
      font-size: 14px;
      word-break: break-all;
      font-weight: 500;
      line-height: 20px;

      &.medium {
        font-size: 0.9rem;
      }
      &.small {
        font-size: 0.7rem;
      }
    }

    .about_me {
      @apply com-text-Auro-Metal-Saurus com-break-all md:com-break-normal;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      &.medium {
        font-size: 0.9rem;
      }
      &.small {
        font-size: 0.7rem;
      }
    }

    .user-social-links {
      @apply com-pr-1;
      display: flex;
      flex-wrap: wrap;
      font-size: 18px;
      gap: 12px;
      a {
        @apply com-p-0 com-m-0;
        nb-icon {
          @apply com-text-Charcoal;
          font-size: 18px;
        }
      }

      &.medium {
        nb-icon {
          @apply com-text-Charcoal;
          font-size: 18px;
        }
      }

      &.small {
        nb-icon {
          @apply com-text-Charcoal;
          font-size: 0.9rem;
        }
      }
    }

    .about-me {
      font-size: 0.8rem;

      &.medium {
        font-size: 0.8rem;
      }

      &.small {
        font-size: 0.7rem;
      }
    }
  }
}
