@import '@/styles/common.less';
@import '@/styles/variables.less';

.group-v2-page {
  padding: 24px;


  &__header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;

    &__left-line,
    &__right-line {
      width: 88px;
      height: 1px;
    }

    &__left-line {
      background: linear-gradient(270deg, #CCCCCC -0.05%, rgba(204, 204, 204, 0) 99.95%);
    }

    &__right-line {
      background: linear-gradient(90deg, #CCCCCC 0%, rgba(204, 204, 204, 0) 100%);
    }

    &__title {
      font-size: 28px;
      line-height: 40px;
      font-weight: 400;
      color: @blColorG2;
      margin: 0 16px;
    }
  }

  &__group-card {
    .flex-row();
    width: 100%;
    padding: 32px;
    background: #FFF;
    border-radius: 16px;
    margin-top: 24px;
    box-sizing: border-box;

    &:first-child {
      margin-top: 0;
    }


    &__avatar {
      width: 88px;
      height: 88px;
      border-radius: 6px;
      border: 4px solid #D9D9D9;
    }

    &__title {
      flex: 1;
      font-size: 32px;
      line-height: 40px;
      font-weight: 500;
      color: @blColor;
      align-self: flex-start;
      margin-left: 36px;
    }

    &__button {
      .button(@width: 176px; @height: 56px; @fontSize: 28px; @fontWeight: 500);
    }
  }

  &__bottom-padding {
    width: 100%;
    height: 24px;
  }
}