.page_add-members {
  .account-heading__title {
    text-transform: none;
  }
}

.add-members {
  margin-bottom: 40px;
  padding: 15px;
  margin-left: -15px;
  margin-right: -15px;
  border-radius: $ac-border-radius;
  background: $blue-transparent10;

  .new-member-list,
  .new-member-form {
    padding: 15px;
    border-radius: $ac-border-radius;
    background: $white;
  }

  .new-member-form {
    margin-bottom: 10px;

    &-error {
      .form-row {
        &__info.form-row__info {
          display: block;
        }

        .tbx {
          border-color: $red;

          &:focus {
            border-color: $blue;
          }
        }
      }
    }

    &__btn-add {
      @include flex-centralize;
      transition: none;

      .btn-icon {
        margin-right: 8px;
        font-size: 1rem;
      }

    }

    .form-row {
      &__info {
        display: none;
        padding-left: 0;
        margin: 8px 0 0;
        color: #cf000f;
      }

      &__field,
      &__label {
        padding-left: 0;
        padding-right: 0;
      }
    }

  }

  .new-member-list {
    &__title {
      margin-bottom: 20px;
      font-size: 1.25rem;
      line-height: 2rem;
      color: $blue-dark;
    }

    &__empty {
      padding: 25px;
      color: $gray;
      border: 1px dashed $gray;
      text-align: center;

      .title {
        margin-bottom: 5px;
        font-size: 1.5rem;
        line-height: 1.5rem;
        font-weight: 500;
      }

      .description {
        margin-bottom: 0;
        font-size: 1rem;
        line-height: 1.5rem;
      }
    }
  }

  .member-field {
    display: flex;
    column-gap: 10px;
    margin-bottom: 20px;

    &:last-of-type {
      margin-bottom: 0;
    }

    .btn-remove {
      height: fit-content;
    }

    .form-row {
      flex: 1;
      margin: 0;
      padding: 0;

      &__label {
        display: none;
      }

      &__field {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
      }

      .tbx {
        font-size: .875rem;

        &:read-only {
          background: $blue-transparent10;
          border-color: transparent;
        }
      }
    }
  }

  &__actions {
    padding: 0;

    .btn {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .add-members {
    &__actions {
      margin-left: -15px;
      margin-right: -15px;
      display: flex;
      flex-direction: row-reverse;
      column-gap: 10px;
      padding: 0;

      .btn {
        margin-bottom: 0;
      }
    }
  }

  .page_add-members {
    .account-heading {
      padding-left: 0;
    }
  }
}

@include media-breakpoint-up(md) {
  .add-members {
    .new-member-form {
      display: flex;
      align-items: flex-end;
      column-gap: 20px;

      .form-row {
        width: 100%;
        margin: 0;
      }

      &__btn-add {
        flex: 0 0 50%;
        max-width: 215px;
        height: fit-content;
      }

      &-error {
        .form-row {
          &__info.form-row__info {
            display: block;
          }
        }

        .new-member-form {
          &__btn-add {
            margin-bottom: 24px;
          }
        }
      }
    }

    &__actions {
      margin-left: 0;
      margin-right: 0;

      .btn {
        margin-bottom: 0;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .add-members {
    margin-left: 0;
    margin-right: 0;
  }
}