@import '../variables';
@import '../theme-colors';

.user-profile-info {
  display: flex;
  border-radius: $default-radius;
  padding: $default-padding-margin 0;
  margin-bottom: $default-padding-margin;
  box-shadow: var(--default-box-shadow);
  background-color: var(--default-card-bg);

  .profile-picture-wrapper {
    display: flex;
    align-items: center;
    border-right: 1px solid var(--default-border-color);

    .profile-picture {
      width: 270px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .profile-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .profile-details {
    flex-grow: 1;
    padding: 0 $default-padding-margin;

    svg {
      stroke-width: 1.2;
    }
  }

  @media (max-width: 991px) {
    .profile-picture-wrapper {
      align-items: center;
      flex-direction: column;

      .profile-info {
        align-items: center;
        padding-left: 0 !important;
        margin-top: $default-padding-margin;
      }
    }
  }

  @media (max-width: 575px) {
    align-items: center;
    flex-direction: column;

    .profile-picture-wrapper {
      border: 0 !important;
      margin-bottom: $default-padding-margin;
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .user-profile-info {
    .profile-picture-wrapper {
      border-right: 0;
      border-left: 1px solid var(--default-border-color);

      .profile-info {
        padding-right: 0;
        padding-left: $default-padding-margin;
      }
    }
  }
}