@import "variables";
.view-list-account {
  .list-group {
    h4 {
      margin: 0;
    }
    .acount-menu-item {
      font-size: 16px;
    }
  }
  .img-box-avatar {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    div {
      width: 100%;
      padding-bottom: calc(100% * 1 / 1);
      position: relative;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        object-position: center;
      }
    }
  }
  .block-content-right {
    .intro-description {
      margin-bottom: 45px;
      p {
        font-size: @font-size-base;
        color: @text-color-2;
        line-height: @line-height-computed;
        margin-bottom: @margin-base-block-medium;
        &.welcome {
          text-transform: uppercase;
        }
        &.business {
          text-transform: uppercase;
          color: @text-color-1;
          font-size: @font-size-medium;
        }
        &.description {
          line-height: 24px;
        }
      }
      h3.user-name {
        font-size: @font-size-h3;
        text-transform: uppercase;
        font-weight: @font-weight-bold;
        color: @background-color-pink;
        margin: 0;
        margin-bottom: @margin-bottom-block-large;
      }
    }
    .info-detail-my-account {
      margin-bottom: 35px;
      .block-item-info {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        & + .block-item-info {
          margin-top: @margin-block-medium;
        }
        span {
          font-size: @font-size-base;
          &:first-child {
            margin-right: @margin-base-block-medium;
          }
          i {
            font-size: @font-size-base;
            color: @background-color-pink;
          }
        }
      }
    }
    .social-link-my-account {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 35px;
      a {
        display: inline-block;
        &:hover {
          i {
            opacity: 1;
          }
        }
        & + a {
          margin-left: 10px;
        }
        i {
          transition: 250ms all ease-in-out;
          font-size: @font-size-large;
          color: @background-color-pink;
          opacity: 0.8;
        }
      }
    }
    .button-edit {
      text-align: right;
    }
  }
}